Hello Everyone! Welcome back to FreemiumTech Website, Toady on this occasion our tutorial is How to Add Animated Soft UI Download Buttons in Blogger. Everyone likes colorful Styles. Here the Top selection of animated download Buttons that change the Background Color when click on the button and it is very attractive and gives a feel while click on it.
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.
Benefits 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 Download Buttons in Blogger?
Step 1: Login to your Blogger Dashboard
Step 2: Go to Themes
Step 3: Click on the Drop down arrow and select Edit HTML
Step 4: Now search for ]]> and paste the following CSS just above it.
You can use our CSS Minifier to minify this CSS and make this more lightweight
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}
Step 5 : Now add the Below button codes in your Particular Post/Page
Add your links at #
<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>
Conclusion
In this post I have made a tutorial about How to Add Animated Soft UI Download Buttons in Blogger. Which gives a colorful animation feel while hovering. I hope you have liked it and please share with your friends and follow our blog for more.If you face any problems in this code or have any questions so feel free to ask me in comments section or join our Telegram Group for discussion.
Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken.