Follow us to get updates regarding Latest posts Follow Now!

How to Add Animated Soft UI Buttons in Blogger?

In this post I have made a step by step Tutorial on How to Add Animated Soft UI Buttons in Blogger? I hope you have liked these Soft UI Button style

In this article I have shared a tutorial on How to Add Animated Soft UI Buttons in Blogger?

how-to-add-animated-soft-ui-buttons-in-blogger


Hello Everyone ! I am Techy DarshaN, Today Our Tutorial is How to Add Animated Soft UI Buttons in Blogger, Which are very attractive and give a Dynamic Look to website. Before starting let's know about these Soft UI Buttons and it's advantages.

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 :-

  1. Clean Optimized look 
  2. Overall Gentle Appearance 
  3. Soft UI Design
  4. Change your old buttons to this new style 
  5.  Adds 3d Feel while Hovering on Buttons
Let's Begin !

Demo

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 .
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

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>

Conclusion

In this post I have made a step by step Tutorial on How to Add Animated Soft UI Buttons in Blogger? Which are very Gentle and have 3d feel when you hover on these Buttons I hope you have liked these Soft UI Button style and do share with your friends and follow up our Blog for more.

If you have any Questions or face any problems while adding these Soft UI Buttons please let me know in the Comments section or You can join our Telegram Group for Discussion.

Referense: www.techydarshan.eu.org

Getting Info...

About the Author

Student | Developer | Blogger

Post a Comment

Techy DarshaN's Rules : Leave your opinion or any doubt about this article And is you have any queries please feel free to ask. Don't try to spam, our team reviews every comment.
Have a Cookie!
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.