How To Hide Powered by Blogger Footer Attribution from Your Blog

 Hello! Welcome to Tecky AaryaN. 

You are looking for How to Add Animated Soft UI Buttons in Blogger? then this post is just for you.

© 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 basically removes the sharp corner of the interface and make the corners Soft for gentle appearance and iconic design.

You can see the demo here⤵

   View 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 Style 1

<button class="custom-btn btn-1" onclick="window.open('#')">Read More</button>

Button Style 2

<button class="custom-btn btn-2" onclick="window.open('#')">Read More</button>

Button Style 3

<button class="custom-btn btn-3" onclick="window.open('#')"><span>Read More</span></button>

Button Style 4

<button class="custom-btn btn-4" onclick="window.open('#')"><span>Read More</span></button>

Button Style 5

<button class="custom-btn btn-5" onclick="window.open('#')"><span>Read More</span></button>

Button Style 6

<button class="custom-btn btn-6" onclick="window.open('#')"><span>Read More</span></button>

Button Style 7

<button class="custom-btn btn-7" onclick="window.open('#')"><span>Read More</span></button>

Button Style 8

<button class="custom-btn btn-8" onclick="window.open('#')"><span>Read More</span></button>

Button Style 9

<button class="custom-btn btn-9" onclick="window.open('#')">Read More</button>

Button Style 10

<button class="custom-btn btn-10" onclick="window.open('#')">Read More</button>

Button Style 11

<button class="custom-btn btn-11" onclick="window.open('#')">Read More<div class="dot"></div></button>

Button Style 12

<button class="custom-btn btn-12" onclick="window.open('#')"><span>Click!</span><span>Read More</span></button>

Button Style 13

<button class="custom-btn btn-13" onclick="window.open('#')">Read More</button>

Button Style 14

<button class="custom-btn btn-14" onclick="window.open('#')">Read More</button>

Button Style 15

<button class="custom-btn btn-15" onclick="window.open('#')">Read More</button>

Button Style 16

<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

TeckyAaryaN

Go to Link