How to Add Animated Soft UI Buttons in Blogger?
 |
| © Copyright 2024 Tecky AaryaN |
What is Soft UI (Neumorphism)?
Soft UI designs are involved in highlights and shadows in design elements to make them look as though they are layered on the page. Soft UI creates a Glassy frost-style or Glassy blur style where elements sink drown and force out from the background to create varying levels. Combining these effects with a softer and more pastel color palettes, and the result is a light, “Soft” interface with deep in shadows and change the overall effects.
Neumorphism Designs doesn’t focus more on things like contrast or similarities between real and digital elements. Instead of of these they focus on “Soft UI” which creates a smoother experience for users. With Neumorphism Designs, you will get the feel that Buttons and Cards are actually part of the background they are laid on. This Neumorphism trend removes the attractive aspects of a typical interface and focuses on a Softer style that stays consistent throughout the design and make the user interference clean.
Soft UI basically removes the sharp corner of the interface and make the corners Soft for gentle appearance and iconic design.
Pros of Soft UI Buttons :-
- Clean Optimized look
- Overall Gentle Appearance
- Soft UI Design
- Change your old buttons to this new style
- Adds 3d Feel while Hovering on Buttons
How to Add Animated Soft UI Buttons in Blogger?
Step 1 : Login to your Blogger Dashboard and Go to Theme
Step 2 : Now click on the drop down Arrow beside 'Customize'
Step 3 : Now choose 'Edit HTML'
Step 4 : Now search for ]]></b:skin> and paste the following CSS just above to it .
Ignore code color Just Double click to copy and paste.
button{margin:20px}
.custom-btn{width:130px;height:40px;color:#fff;border-radius:50px;padding:10px 25px;font-family:'Lato',sans-serif;font-weight:500;font-size:16px;background:transparent;cursor:pointer;transition:all 0.3s ease;position:relative;display:inline-block;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),inset -7px -7px 10px 0 rgba(0,0,0,.1),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);text-shadow:2px 2px 3px rgba(255,255,255,.5),-4px -4px 6px rgba(116,125,136,.2);outline:none}
/* 1 */
.btn-1{color:rgba(0,3,255,.5);background-color:#b2d8ff;border:none}
.btn-1:hover{color:rgba(0,3,255,.7);background:linear-gradient(0deg,rgba(0,3,255,.5) 0%,rgba(2,126,251,.5) 100%)}
/* 2 */
.btn-2{background-color:#e8d1ff;color:rgba(96,9,240,.5);border:none}
.btn-2:before{height:0%;width:2px}
.btn-2:hover{box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.5),inset -4px -4px 6px 0 rgba(255,255,255,.2),inset 4px 4px 6px 0 rgba(0,0,0,.2)}
/* 3 */
.btn-3{color:rgba(2,126,251,1);background:rgba(118,174,241,1);width:130px;height:40px;line-height:42px;padding:0;border:none}
.btn-3 span{position:relative;display:block;width:100%;height:100%}
.btn-3:before,.btn-3:after{position:absolute;content:"";right:0;top:0;background:rgba(2,126,251,1);transition:all 0.3s ease}
.btn-3:before{height:0%;width:2px}
.btn-3:after{width:0%;height:2px}let's
.btn-3:hover{background:transparent;box-shadow:none}
.btn-3:hover:before{height:100%}
.btn-3:hover:after{width:100%}
.btn-3 span:hover{color:rgba(2,126,251,1)}
.btn-3 span:before,.btn-3 span:after{position:absolute;content:"";left:0;bottom:0;background:rgba(2,126,251,1);transition:all 0.3s ease}
.btn-3 span:before{width:2px;height:0%}
.btn-3 span:after{width:0%;height:2px}
.btn-3 span:hover:before{height:100%}
.btn-3 span:hover:after{width:100%}
/* 4 */
.btn-4{color:#03c8a8;background:#96e4df;line-height:42px;padding:0;border:none}
.btn-4:hover{background-color:#89d8d3}
/* 5 */
.btn-5{border:none;color:#ff84c1;background-color:#ffc1e0}
.btn-5:hover{color:#f0094a;background:transparent;box-shadow:none}
.btn-5:before,.btn-5:after{content:'';position:absolute;top:0;right:0;height:2px;width:0;background:#f0094a;box-shadow:-1px -1px 5px 0 #fff,7px 7px 20px 0 #0003,4px 4px 5px 0 #0002;transition:400ms ease all}
.btn-5:after{right:inherit;top:inherit;left:0;bottom:0}
.btn-5:hover:before,.btn-5:hover:after{width:100%;transition:800ms ease all}
/* 6 */
.btn-6{color:rgba(234,76,137,1);background:rgb(247,150,192);line-height:42px;padding:0;border:none}
.btn-6 span{position:relative;display:block;width:100%;height:100%}
.btn-6:before,.btn-6:after{position:absolute;content:"";height:0%;width:1px;box-shadow:-1px -1px 20px 0 rgba(255,255,255,1),-4px -4px 5px 0 rgba(255,255,255,1),7px 7px 20px 0 rgba(0,0,0,.4),4px 4px 5px 0 rgba(0,0,0,.3)}
.btn-6:before{right:0;top:0;transition:all 500ms ease}
.btn-6:after{left:0;bottom:0;transition:all 500ms ease}
.btn-6:hover{background:transparent;color:#76aef1;box-shadow:none}
.btn-6:hover:before{transition:all 500ms ease;height:100%}
.btn-6:hover:after{transition:all 500ms ease;height:100%}
.btn-6 span:before,.btn-6 span:after{position:absolute;content:"";box-shadow:-1px -1px 20px 0 rgba(255,255,255,1),-4px -4px 5px 0 rgba(255,255,255,1),7px 7px 20px 0 rgba(0,0,0,.4),4px 4px 5px 0 rgba(0,0,0,.3)}
.btn-6 span:before{left:0;top:0;width:0%;height:.5px;transition:all 500ms ease}
.btn-6 span:after{right:0;bottom:0;width:0%;height:.5px;transition:all 500ms ease}
.btn-6 span:hover:before{width:100%}
.btn-6 span:hover:after{width:100%}
/* 7 */
.btn-7{background:#ffbf7f;line-height:42px;color:darkorange;padding:0;border:none}
.btn-7 span{position:relative;display:block;width:100%;height:100%}
.btn-7:before,.btn-7:after{position:absolute;content:"";right:0;bottom:0;background:rgba(251,75,2,1);box-shadow:-7px -7px 20px 0 rgba(255,255,255,.9),-4px -4px 5px 0 rgba(255,255,255,.9),7px 7px 20px 0 rgba(0,0,0,.2),4px 4px 5px 0 rgba(0,0,0,.3);transition:all 0.3s ease}
.btn-7:before{height:0%;width:2px}
.btn-7:after{width:0%;height:2px}
.btn-7:hover{color:rgba(251,75,2,1);background:transparent}
.btn-7:hover:before{height:100%}
.btn-7:hover:after{width:100%}
.btn-7 span:before,.btn-7 span:after{position:absolute;content:"";left:0;top:0;background:rgba(251,75,2,1);box-shadow:-7px -7px 20px 0 rgba(255,255,255,.9),-4px -4px 5px 0 rgba(255,255,255,.9),7px 7px 20px 0 rgba(0,0,0,.2),4px 4px 5px 0 rgba(0,0,0,.3);transition:all 0.3s ease}
.btn-7 span:before{width:2px;height:0%}
.btn-7 span:after{height:2px;width:0%}
.btn-7 span:hover:before{height:100%}
.btn-7 span:hover:after{width:100%}
/* 8 */
.btn-8{background-color:#d9d0f5;color:#c797eb;line-height:42px;padding:0;border:none}
.btn-8 span{position:relative;display:block;width:100%;height:100%}
.btn-8:before,.btn-8:after{position:absolute;content:"";right:0;bottom:0;background:#c797eb;transition:all 0.3s ease}
.btn-8:before{height:0%;width:2px}
.btn-8:after{width:0%;height:2px}
.btn-8:hover:before{height:100%}
.btn-8:hover:after{width:100%}
.btn-8:hover{background:transparent}
.btn-8 span:hover{color:#c797eb}
.btn-8 span:before,.btn-8 span:after{position:absolute;content:"";left:0;top:0;background:#c797eb;transition:all 0.3s ease}
.btn-8 span:before{width:2px;height:0%}
.btn-8 span:after{height:2px;width:0%}
.btn-8 span:hover:before{height:100%}
.btn-8 span:hover:after{width:100%}
/* 9 */
.btn-9{border:none;transition:all 0.3s ease;overflow:hidden;color:#1fd1f9;color:#0cbcff}
.btn-9:after{position:absolute;content:" ";z-index:-1;top:0;left:0;width:100%;height:100%;background:#5fe0fd;transition:all 0.3s ease}
.btn-9:hover{background:transparent;box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.5),inset 4px 4px 6px 0 rgba(116,125,136,.3);color:#fff}
.btn-9:hover:after{-webkit-transform:scale(2) rotate(180deg);transform:scale(2) rotate(180deg);box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.5),inset 4px 4px 6px 0 rgba(116,125,136,.3)}
/* 10 */
.btn-10{background:lightblue;color:#60abf7;border:none;transition:all 0.3s ease;overflow:hidden}
.btn-10:after{position:absolute;content:" ";top:0;left:0;z-index:-1;width:100%;height:100%;transition:all 0.3s ease;-webkit-transform:scale(.1);transform:scale(.1)}
.btn-10:hover{color:#fff;border:none;background:transparent}
.btn-10:hover:after{background:#7fbfff;-webkit-transform:scale(1);transform:scale(1)}
/* 11 */
.btn-11{border:none;background:rgb(251,33,117);background:linear-gradient(0deg,rgba(251,33,117,1) 0%,rgba(234,76,137,1) 100%);background:#f7d0f5;color:rgba(251,33,117,.5);overflow:hidden}
.btn-11:hover{text-decoration:none;color:#fff}
.btn-11:before{position:absolute;content:'';display:inline-block;top:-180px;left:0;width:30px;height:100%;background-color:#fff;animation:shiny-btn1 3s ease-in-out infinite}
.btn-11:hover{opacity:.7}
.btn-11:active{box-shadow:4px 4px 6px 0 rgba(255,255,255,.3),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.2),inset 4px 4px 6px 0 rgba(0,0,0,.2)}
@-webkit-keyframes shiny-btn1{0%{-webkit-transform:scale(0) rotate(45deg);opacity:0}80%{-webkit-transform:scale(0) rotate(45deg);opacity:0.5}81%{-webkit-transform:scale(4) rotate(45deg);opacity:1}100%{-webkit-transform:scale(50) rotate(45deg);opacity:0}}
/* 12 */
.btn-12{position:relative;right:20px;bottom:20px;border:none;box-shadow:none;width:130px;height:40px;line-height:42px;-webkit-perspective:230px;perspective:230px}
.btn-12 span{background:#7fbfff;color:#3b97f3;display:block;position:absolute;width:130px;height:40px;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);border-radius:50px;margin:0;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .3s;transition:all .3s}
.btn-12 span:nth-child(1){box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:50% 50% -20px;-moz-transform-origin:50% 50% -20px;transform-origin:50% 50% -20px}
.btn-12 span:nth-child(2){-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:50% 50% -20px;-moz-transform-origin:50% 50% -20px;transform-origin:50% 50% -20px}
.btn-12:hover span:nth-child(1){box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg)}
.btn-12:hover span:nth-child(2){background:transparent;color:transparent;box-shadow:none;text-shadow:none;-webkit-transform:rotateX(-90deg);-moz-transform:rotateX(-90deg);transform:rotateX(-90deg)}
/* 13 */
.btn-13{color:lightseagreen;background-color:#89d8d3;border:none;z-index:1}
.btn-13:after{position:absolute;content:"";width:100%;height:0;bottom:0;left:0;z-index:-1;border-radius:50px;background-color:#4dccc6;background-image:linear-gradient(315deg,#4dccc6 0%,#96e4df 74%);box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),inset -7px -7px 10px 0 rgba(0,0,0,.1),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);text-shadow:0 0 6px rgba(255,255,255,.3),-4px -4px 6px rgba(116,125,136,.2);transition:all 0.3s ease}
.btn-13:hover{}
.btn-13:hover:after{top:0;height:100%}
.btn-13:active{top:2px}
/* 14 */
.btn-14{background:#ffff9e;color:#ffb64d;border:none;z-index:1}
.btn-14:after{position:absolute;content:"";width:100%;height:0;top:0;left:0;z-index:-1;border-radius:50px;background-color:#ffff8a;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),inset -7px -7px 10px 0 rgba(0,0,0,.1),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);text-shadow:0 0 6px rgba(255,255,255,.3),-4px -4px 6px rgba(116,125,136,.2);transition:all 0.3s ease}
.btn-14:hover{color:#ffb64d}
.btn-14:hover:after{top:auto;bottom:0;height:100%}
.btn-14:active{top:2px}
/* 15 */
.btn-15{background:#c68eff;color:#a453f5;border:none;z-index:1}
.btn-15:after{position:absolute;content:"";width:0;height:100%;top:0;right:0;z-index:-1;background-color:#7f7fff;border-radius:50px;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);transition:all 0.3s ease}
.btn-15:hover{color:#4c4cf1}
.btn-15:hover:after{left:0;width:100%}
.btn-15:active{top:2px}
/* 16 */
.btn-16{border:none;color:#aaa}
.btn-16:after{position:absolute;content:"";width:0;height:100%;top:0;left:0;direction:rtl;z-index:-1;border-radius:50px;box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;transition:all 0.3s ease}
.btn-16:hover{color:#bbb}
.btn-16:hover:after{left:auto;right:0;width:100%}
.btn-16:active{top:2px}
Replace # with your links
<button class="custom-btn btn-1" onclick="window.open('#')">Read More</button>
<button class="custom-btn btn-2" onclick="window.open('#')">Read More</button>
<button class="custom-btn btn-3" onclick="window.open('#')"><span>Read More</span></button>
<button class="custom-btn btn-4" onclick="window.open('#')"><span>Read More</span></button>
<button class="custom-btn btn-5" onclick="window.open('#')"><span>Read More</span></button>
<button class="custom-btn btn-6" onclick="window.open('#')"><span>Read More</span></button>
<button class="custom-btn btn-7" onclick="window.open('#')"><span>Read More</span></button>
<button class="custom-btn btn-8" onclick="window.open('#')"><span>Read More</span></button>
<button class="custom-btn btn-9" onclick="window.open('#')">Read More</button>
<button class="custom-btn btn-10" onclick="window.open('#')">Read More</button>
<button class="custom-btn btn-11" onclick="window.open('#')">Read More<div class="dot"></div></button>
<button class="custom-btn btn-12" onclick="window.open('#')"><span>Click!</span><span>Read More</span></button>
<button class="custom-btn btn-13" onclick="window.open('#')">Read More</button>
<button class="custom-btn btn-14" onclick="window.open('#')">Read More</button>
<button class="custom-btn btn-15" onclick="window.open('#')">Read More</button>
<button class="custom-btn btn-16" onclick="window.open('#')">Read More</button>
To appreciate our works, consider keeping the credits in codes. We don't allow to rewrite this post in any manner. Don't copy this post, codes or any part from this article without Permission, it is strictly prohibited. If you do so, Legal Actions will be taken.
Copyright
