Button is no longer strange to most internet users today. For web developers, designers, ... the button is an indispensable thing. In this article, ANAND NAWAL will share with you a set of buttons with many different effects, stay tuned.
This button set uses completely CSS so it will not affect the page loading speed. Feel free to use it!
Demo CSS buttons hover effects
Installation Instructions
Step 1: Copy the entire CSS below:
<style type="text/css">
*{box-sizing:border-box;margin:0;padding:0}.anand-btn:active,.anand-btn:hover,.anand-btn:focus{outline:0!important;outline-offset:0}.anand-btn::before,.anand-btn::after{position:absolute;content:""}.anand-btn-holder{display:flex;flex-wrap:wrap;justify-content:center;max-width:1000px;margin:10px auto 35px}.anand-btn{position:relative;display:inline-block;width:auto;height:auto;background-color:transparent;border:none;cursor:pointer;margin:0 25px 15px;min-width:150px}.anand-btn span{position:relative;display:inline-block;font-size:14px;font-weight:bold;letter-spacing:2px;text-transform:uppercase;top:0;left:0;width:100%;padding:15px 20px;transition:0.3s}.anand-btn-1::before{background-color:rgb(28,31,30);transition:0.3s ease-out}.anand-btn-1 span{color:rgb(255,255,255);border:1px solid rgb(28,31,30);transition:0.2s 0.1s}.anand-btn-1 span:hover{color:rgb(28,31,30);transition:0.2s 0.1s}.anand-btn.hover-filled-slide-down::before{bottom:0;left:0;right:0;height:100%;width:100%}.anand-btn.hover-filled-slide-down:hover::before{height:0%}.anand-btn.hover-filled-slide-up::before{top:0;left:0;right:0;height:100%;width:100%}.anand-btn.hover-filled-slide-up:hover::before{height:0%}.anand-btn.hover-filled-slide-left::before{top:0;bottom:0;left:0;height:100%;width:100%}.anand-btn.hover-filled-slide-left:hover::before{width:0%}.anand-btn.hover-filled-slide-right::before{top:0;bottom:0;right:0;height:100%;width:100%}.anand-btn.hover-filled-slide-right:hover::before{width:0%}.anand-btn.hover-filled-opacity::before{top:0;bottom:0;right:0;height:100%;width:100%;opacity:1}.anand-btn.hover-filled-opacity:hover::before{opacity:0}.anand-btn-2::before{background-color:rgb(28,31,30);transition:0.3s ease-out}.anand-btn-2 span{color:rgb(28,31,30);border:1px solid rgb(28,31,30);transition:0.2s}.anand-btn-2 span:hover{color:rgb(255,255,255);transition:0.2s 0.1s}.anand-btn.hover-slide-down::before{top:0;left:0;right:0;height:0%;width:100%}.anand-btn.hover-slide-down:hover::before{height:100%}.anand-btn.hover-slide-up::before{bottom:0;left:0;right:0;height:0%;width:100%}.anand-btn.hover-slide-up:hover::before{height:100%}.anand-btn.hover-slide-left::before{top:0;bottom:0;right:0;height:100%;width:0%}.anand-btn.hover-slide-left:hover::before{width:100%}.anand-btn.hover-slide-right::before{top:0;bottom:0;left:0;height:100%;width:0%}.anand-btn.hover-slide-right:hover::before{width:100%}.anand-btn.hover-opacity::before{top:0;bottom:0;right:0;height:100%;width:100%;opacity:0}.anand-btn.hover-opacity:hover::before{opacity:1}.anand-btn-3{padding:5px}.anand-btn-3 span{color:rgb(255,255,255);background-color:rgb(54,56,55)}.anand-btn-3::before,.anand-btn-3::after{background:transparent;z-index:2}.anand-btn.hover-border-1::before,.anand-btn.hover-border-1::after{width:10%;height:25%;transition:0.35s}.anand-btn.hover-border-1::before{top:0;left:0;border-left:1px solid rgb(28,31,30);border-top:1px solid rgb(28,31,30)}.anand-btn.hover-border-1::after{bottom:0;right:0;border-right:1px solid rgb(28,31,30);border-bottom:1px solid rgb(28,31,30)}.anand-btn.hover-border-1:hover::before,.anand-btn.hover-border-1:hover::after{width:99%;height:98%}.anand-btn.hover-border-2::before,.anand-btn.hover-border-2::after{width:10%;height:25%;transition:0.35s}.anand-btn.hover-border-2::before{bottom:0;left:0;border-left:1px solid rgb(28,31,30);border-bottom:1px solid rgb(28,31,30)}.anand-btn.hover-border-2::after{top:0;right:0;border-right:1px solid rgb(28,31,30);border-top:1px solid rgb(28,31,30)}.anand-btn.hover-border-2:hover::before,.anand-btn.hover-border-2:hover::after{width:99%;height:99%}.anand-btn.hover-border-3::before,.anand-btn.hover-border-3::after{width:0%;height:0%;opacity:0;transition:width 0.2s 0.15s linear,height 0.15s linear,opacity 0s 0.35s}.anand-btn.hover-border-3::before{top:0;right:0;border-top:1px solid rgb(28,31,30);border-left:1px solid rgb(28,31,30)}.anand-btn.hover-border-3::after{bottom:0;left:0;border-bottom:1px solid rgb(28,31,30);border-right:1px solid rgb(28,31,30)}.anand-btn.hover-border-3:hover::before,.anand-btn.hover-border-3:hover::after{width:100%;height:99%;opacity:1;transition:width 0.2s linear,height 0.15s 0.2s linear,opacity 0s}.anand-btn.hover-border-4::before,.anand-btn.hover-border-4::after{width:0%;height:0%;opacity:0;transition:width 0.2s linear,height 0.15s 0.2s ease-out,opacity 0s 0.35s}.anand-btn.hover-border-4::before{bottom:0;left:-1px;border-top:1px solid rgb(28,31,30);border-left:1px solid rgb(28,31,30)}.anand-btn.hover-border-4::after{top:0;right:0;border-bottom:1px solid rgb(28,31,30);border-right:1px solid rgb(28,31,30)}.anand-btn.hover-border-4:hover::before,.anand-btn.hover-border-4:hover::after{width:100%;height:99%;opacity:1;transition:width 0.2s 0.15s ease-out,height 0.15s ease-in,opacity 0s}.anand-btn.hover-border-5::before,.anand-btn.hover-border-5::after{width:0%;height:0%;opacity:0}.anand-btn.hover-border-5::before{top:0;right:0;border-top:1px solid rgb(28,31,30);border-left:1px solid rgb(28,31,30);transition:width 0.2s 0.5s ease-out,height 0.15s 0.35s linear,opacity 0s 0.7s}.anand-btn.hover-border-5::after{bottom:0;left:0;border-bottom:1px solid rgb(28,31,30);border-right:1px solid rgb(28,31,30);transition:width 0.2s 0.15s linear,height 0.15s ease-in,opacity 0s 0.35s}.anand-btn.hover-border-5:hover::before,.anand-btn.hover-border-5:hover::after{width:100%;height:96%;opacity:1}.anand-btn.hover-border-5:hover::before{transition:width 0.2s ease-in,height 0.15s 0.2s linear,opacity 0s}.anand-btn.hover-border-5:hover::after{transition:width 0.2s 0.35s linear,height 0.15s 0.5s ease-out,opacity 0s 0.3s}.anand-btn-4 span{color:rgb(28,31,30);background-color:rgb(245,245,245)}.anand-btn-4 span:hover{color:rgb(54,56,55)}.anand-btn-4::before,.anand-btn-4::after{width:15%;height:2px;background-color:rgb(54,56,55);z-index:2}.anand-btn.hover-border-6::before,.anand-btn.hover-border-6::after{top:0;transition:width 0.2s 0.35s ease-out}.anand-btn.hover-border-6::before{right:50%}.anand-btn.hover-border-6::after{left:50%}.anand-btn.hover-border-6:hover::before,.anand-btn.hover-border-6:hover::after{width:50%;transition:width 0.2s ease-in}.anand-btn.hover-border-6 span::before,.anand-btn.hover-border-6 span::after{width:0%;height:0%;background:transparent;opacity:0;z-index:2;transition:width 0.2s ease-in,height 0.15s 0.2s linear,opacity 0s 0.35s}.anand-btn.hover-border-6 span::before{top:0;left:0;border-left:2px solid rgb(54,56,55);border-bottom:2px solid rgb(54,56,55)}.anand-btn.hover-border-6 span::after{top:0;right:0;border-right:2px solid rgb(54,56,55);border-bottom:2px solid rgb(54,56,55)}.anand-btn.hover-border-6 span:hover::before,.anand-btn.hover-border-6 span:hover::after{width:50%;height:96%;opacity:1;transition:height 0.2s 0.2s ease-in,width 0.2s 0.4s linear,opacity 0s 0.2s}.anand-btn.hover-border-7::before,.anand-btn.hover-border-7::after{bottom:0;transition:width 0.2s 0.35s ease-out}.anand-btn.hover-border-7::before{right:50%}.anand-btn.hover-border-7::after{left:50%}.anand-btn.hover-border-7:hover::before,.anand-btn.hover-border-7:hover::after{width:50%;transition:width 0.2s ease-in}.anand-btn.hover-border-7 span::before,.anand-btn.hover-border-7 span::after{width:0%;height:0%;background:transparent;opacity:0;z-index:2;transition:width 0.2s ease-in,height 0.15s 0.2s linear,opacity 0s 0.35s}.anand-btn.hover-border-7 span::before{bottom:0;left:0;border-left:2px solid rgb(54,56,55);border-top:2px solid rgb(54,56,55)}.anand-btn.hover-border-7 span::after{bottom:0;right:0;border-right:2px solid rgb(54,56,55);border-top:2px solid rgb(54,56,55)}.anand-btn.hover-border-7 span:hover::before,.anand-btn.hover-border-7 span:hover::after{width:50%;height:96%;opacity:1;transition:height 0.2s 0.2s ease-in,width 0.2s 0.4s linear,opacity 0s 0.2s}.anand-btn.hover-border-8::before,.anand-btn.hover-border-8::after{bottom:0;width:15%;transition:width 0.2s 0.35s ease-out}.anand-btn.hover-border-8::before{right:50%}.anand-btn.hover-border-8::after{left:50%}.anand-btn.hover-border-8:hover::before{width:50%;transition:width 0.2s ease-in}.anand-btn.hover-border-8:hover::after{width:50%;transition:width 0.1s ease-in}.anand-btn.hover-border-8 span::before,.anand-btn.hover-border-8 span::after{width:0%;height:0%;bottom:0;background:transparent;opacity:0;z-index:2}.anand-btn.hover-border-8 span::before{left:0%;border-left:2px solid rgb(54,56,55);transition:height 0.25s ease-in,opacity 0s 0.35s}.anand-btn.hover-border-8 span:hover::before{height:96%;opacity:1;transition:height 0.25s 0.2s ease-out,opacity 0s 0.2s}.anand-btn.hover-border-8 span::after{right:0%;border-right:2px solid rgb(54,56,55);border-top:2px solid rgb(54,56,55);transition:width 0.2s ease-in,height 0.15s 0.2s linear,opacity 0s 0.35s}.anand-btn.hover-border-8 span:hover::after{width:99%;height:96%;opacity:1;transition:height 0.15s 0.1s linear,width 0.2s 0.25s linear,opacity 0s 0.1s}.anand-btn.hover-border-9::before,.anand-btn.hover-border-9::after{bottom:0;width:15%;transition:width 0.2s 0.35s ease-out}.anand-btn.hover-border-9::before{right:50%}.anand-btn.hover-border-9::after{left:50%}.anand-btn.hover-border-9:hover::before{width:50%;transition:width 0.1s ease-in}.anand-btn.hover-border-9:hover::after{width:50%;transition:width 0.2s ease-in}.anand-btn.hover-border-9 span::before,.anand-btn.hover-border-9 span::after{width:0%;height:0%;bottom:0;background:transparent;opacity:0;z-index:2}.anand-btn.hover-border-9 span::after{right:0%;border-right:2px solid rgb(54,56,55);transition:height 0.25s ease-in,opacity 0s 0.35s}.anand-btn.hover-border-9 span:hover::after{height:96%;opacity:1;transition:height 0.25s 0.2s ease-out,opacity 0s 0.2s}.anand-btn.hover-border-9 span::before{left:0%;border-left:2px solid rgb(54,56,55);border-top:2px solid rgb(54,56,55);transition:width 0.2s ease-in,height 0.15s 0.2s linear,opacity 0s 0.35s}.anand-btn.hover-border-9 span:hover::before{width:98.5%;height:96%;opacity:1;transition:height 0.15s 0.1s linear,width 0.2s 0.25s linear,opacity 0s 0.1s}.anand-btn.hover-border-10::before,.anand-btn.hover-border-10::after{left:0%;height:30%;width:2px;transition:height 0.2s 0.35s ease-out}.anand-btn.hover-border-10::before{top:50%}.anand-btn.hover-border-10::after{bottom:50%}.anand-btn.hover-border-10:hover::before{height:50%;transition:height 0.2s ease-in}.anand-btn.hover-border-10:hover::after{height:50%;transition:height 0.1s ease-in}.anand-btn.hover-border-10 span::before,.anand-btn.hover-border-10 span::after{width:0%;height:0%;background:transparent;opacity:0;z-index:2}.anand-btn.hover-border-10 span::after{bottom:0;left:0%;border-bottom:2px solid rgb(54,56,55);transition:width 0.25s ease-in,opacity 0s 0.35s}.anand-btn.hover-border-10 span:hover::after{width:100%;opacity:1;transition:width 0.25s 0.2s ease-out,opacity 0s 0.2s}.anand-btn.hover-border-10 span::before{top:0%;left:0%;border-top:2px solid rgb(54,56,55);border-right:2px solid rgb(54,56,55);transition:height 0.15s ease-in,width 0.2s 0.15s linear,opacity 0s 0.35s}.anand-btn.hover-border-10 span:hover::before{width:98.5%;height:96%;opacity:1;transition:width 0.2s 0.1s linear,height 0.15s 0.3s ease-out,opacity 0s 0.1s}.anand-btn-5 span{color:rgb(28,31,30);border:2px solid rgb(249,211,27);transition:0.2s}.anand-btn-5 span:hover{background-color:rgb(245,245,245)}.anand-btn.hover-border-11::before,.anand-btn.hover-border-11::after{width:100%;height:2px;background-color:rgb(54,56,55);z-index:2;transition:0.35s}.anand-btn.hover-border-11::before{top:0;right:0}.anand-btn.hover-border-11::after{bottom:0;left:0}.anand-btn.hover-border-11:hover::before,.anand-btn.hover-border-11:hover::after{width:0%;transition:0.2s 0.2s ease-out}.anand-btn.hover-border-11 span::before,.anand-btn.hover-border-11 span::after{width:2px;height:100%;background-color:rgb(54,56,55);z-index:2;transition:0.25s}.anand-btn.hover-border-11 span::before{bottom:0;right:-2px}.anand-btn.hover-border-11 span::after{top:0;left:-2px}.anand-btn.hover-border-11 span:hover::before,.anand-btn.hover-border-11 span:hover::after{height:0%}
</style>
Step 2: Insert the entire code just copied before the </body> . tag
Step3: Save!manual
Here are 21 buttons with different hover effects. If you want to use any template, copy the code corresponding to that template!
<center><button class="anand-btn anand-btn-1 hover-filled-slide-down" target="blank" title="ANAND NAWAL" onclick="window.open('href="https://www.anandnawal.com/')"><span>hover me</span></button></center><center><button class="anand-btn anand-btn-1 hover-filled-slide-up" target="blank" title="ANAND NAWAL" onclick="window.open('href="https://www.anandnawal.com/')"><span>hover me</span></button></center><center><button class="anand-btn anand-btn-1 hover-filled-slide-left" target="blank" title="ANAND NAWAL" onclick="window.open('href="https://www.anandnawal.com/')"><span>hover me</span></button></center><center><button class="anand-btn anand-btn-1 hover-filled-slide-right" target="blank" title="ANAND NAWAL" onclick="window.open('href="https://www.anandnawal.com/')"><span>hover me</span></button></center><center><button class="anand-btn anand-btn-1 hover-filled-opacity" target="blank" title="ANAND NAWAL" onclick="window.open('href="https://www.anandnawal.com/')"><span>hover me</span></button></center><center><button class="anand-btn anand-btn-2 hover-slide-down" target="blank" title="ANAND NAWAL" onclick="window.open('href="https://www.anandnawal.com/')"><span>hover me</span></button></center><center><button class="anand-btn anand-btn-2 hover-slide-up" target="blank" title="ANAND NAWAL" onclick="window.open('href="https://www.anandnawal.com/')"><span>hover me</span></button></center><center><button class="anand-btn anand-btn-2 hover-slide-left" target="blank" title="ANAND NAWAL" onclick="window.open('href="https://www.anandnawal.com/')"><span>hover me</span></button></center><center><button class="anand-btn anand-btn-2 hover-slide-right" target="blank" title="ANAND NAWAL" onclick="window.open('href="https://www.anandnawal.com/')"><span>hover me</span></button></center><center><button class="anand-btn anand-btn-2 hover-opacity" target="blank" title="ANAND NAWAL" onclick="window.open('href="https://www.anandnawal.com/')"><span>hover me</span></button></center><center><button class="anand-btn anand-btn-3 hover-border-1" target="blank" title="ANAND NAWAL" onclick="window.open('href="https://www.anandnawal.com/')"><span>hover me</span></button></center><center><button class="anand-btn anand-btn-3 hover-border-2" target="blank" title="ANAND NAWAL" onclick="window.open('href="https://www.anandnawal.com/')"><span>hover me</span></button></center><center><button class="anand-btn anand-btn-3 hover-border-3" target="blank" title="ANAND NAWAL" onclick="window.open('href="https://www.anandnawal.com/')"><span>hover me</span></button></center><center><button class="anand-btn anand-btn-3 hover-border-4" target="blank" title="ANAND NAWAL" onclick="window.open('href="https://www.anandnawal.com/')"><span>hover me</span></button></center><center><button class="anand-btn anand-btn-3 hover-border-5" target="blank" title="ANAND NAWAL" onclick="window.open('href="https://www.anandnawal.com/')"><span>hover me</span></button></center><center><button class="anand-btn anand-btn-4 hover-border-6" target="blank" title="ANAND NAWAL" onclick="window.open('href="https://www.anandnawal.com/')"><span>hover me</span></button></center><center><button class="anand-btn anand-btn-4 hover-border-7" target="blank" title="ANAND NAWAL" onclick="window.open('href="https://www.anandnawal.com/')"><span>hover me</span></button></center><center><button class="anand-btn anand-btn-4 hover-border-8" target="blank" title="ANAND NAWAL" onclick="window.open('href="https://www.anandnawal.com/')"><span>hover me</span></button></center><center><button class="anand-btn anand-btn-4 hover-border-9" target="blank" title="ANAND NAWAL" onclick="window.open('href="https://www.anandnawal.com/')"><span>hover me</span></button></center><center><button class="anand-btn anand-btn-4 hover-border-10" target="blank" title="ANAND NAWAL" onclick="window.open('href="https://www.anandnawal.com/')"><span>hover me</span></button></center><center><button class="anand-btn anand-btn-5 hover-border-11" target="blank" title="ANAND NAWAL" onclick="window.open('href="https://www.anandnawal.com/')"><span>hover me</span></button></center>If you liked the idea and working of these buttons
then don't forget to comment and follow our blog for
more interesting web development tools for free.