Animated Buttons Pure CSS
Before We Start to Animated Buttons Pure CSS
Animated Buttons Pure CSS can be used to animate Forms, Buttons, etc. and create user attractive UI components.
So if you are a person who wishes to develop a website, you have to know how to create animations properly. Check out our tutorial and you can learn this techniques and use it on your web development. Below sections shows how to develop this animations.
How to create? We are here to solve your problem. In this article we discuss how to create a hover effect animations. Before we start please read the below articles which easier you to understand the process, if you are new to development.
Step 1 – Add HTML
It’s too easy and simple. Just copy and paste below code in your HTML editor between <body> </body> tag as below.
<body>
<div>
<button class="btn first">Button 1</button>
<button class="btn second">Button 2</button>
<button class="btn third">Button 3</button>
<button class="btn fourth">Button 4</button>
<button class="btn fifth">Button 5</button>
<button class="btn sixth">Button 6</button>
</div>
</body>
Step 2 – Add CSS
Copy and paste below code in your HTML editor between <style></style> tag as below.
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #030436;
font-size: 16px;
}
body {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: center;
}
.btn {
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: 2px solid #8d3af5;
border-radius: 0.6em;
color: #8d3af5;
cursor: pointer;
display: flex;
align-self: center;
font-size: 1rem;
font-weight: 400;
line-height: 1;
margin: 20px;
padding: 1.2em 2.8em;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-weight: 700;
}
.btn:hover,
.btn:focus {
color: #fff;
outline: 0;
}
.first {
transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
}
.first:hover {
box-shadow: 0 0 40px 40px #8d3af5 inset;
}
.second {
border-radius: 3em;
border-color: #16ab36;
color: #fff;
background-image: linear-gradient(to right, rgba(150, 235, 22, 0.7), rgba(0, 179, 81, 0.7) 5%, #16ab36 5%, #16ab36 10%, rgba(150, 235, 22, 0.7) 10%, rgba(0, 179, 81, 0.7) 15%, #16ab36 15%, #16ab36 20%, rgba(150, 235, 22, 0.7) 20%, rgba(0, 179, 81, 0.7) 25%, #16ab36 25%, #16ab36 30%, rgba(150, 235, 22, 0.7) 30%, rgba(0, 179, 81, 0.7) 35%, #16ab36 35%, #16ab36 40%, rgba(150, 235, 22, 0.7) 40%, rgba(0, 179, 81, 0.7) 45%, #16ab36 45%, #16ab36 50%, rgba(150, 235, 22, 0.7) 50%, rgba(0, 179, 81, 0.7) 55%, #16ab36 55%, #16ab36 60%, rgba(150, 235, 22, 0.7) 60%, rgba(0, 179, 81, 0.7) 65%, #16ab36 65%, #16ab36 70%, rgba(150, 235, 22, 0.7) 70%, rgba(0, 179, 81, 0.7) 75%, #16ab36 75%, #16ab36 80%, rgba(150, 235, 22, 0.7) 80%, rgba(0, 179, 81, 0.7) 85%, #16ab36 85%, #16ab36 90%, rgba(150, 235, 22, 0.7) 90%, rgba(0, 179, 81, 0.7) 95%, #16ab36 95%, #16ab36 100%);
background-position: 0 0;
background-size: 100%;
transition: background 300ms ease-in-out;
}
.second:hover {
background-position: 100px;
}
.third {
border-color: #5c1fe5;
color: #fff;
box-shadow: 0 0 40px 40px #5c1fe5 inset, 0 0 0 0 #5c1fe5;
transition: all 150ms ease-in-out;
}
.third:hover {
box-shadow: 0 0 10px 0 #5c1fe5 inset, 0 0 10px 4px #5c1fe5;
}
.fourth {
border-color: #0ab531;
color: #fff;
background-image: linear-gradient(45deg, #0ab531 50%, transparent 50%);
background-position: 100%;
background-size: 400%;
transition: background 300ms ease-in-out;
}
.fourth:hover {
background-position: 0;
}
.fifth {
border-color: #9189c7;
border-radius: 0;
color: #9189c7;
position: relative;
overflow: hidden;
z-index: 1;
transition: color 150ms ease-in-out;
}
.fifth:after {
content: "";
position: absolute;
display: block;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 100%;
background: #9189c7;
z-index: -1;
transition: width 150ms ease-in-out;
}
.fifth:hover {
color: #fff;
}
.fifth:hover:after {
width: 110%;
}
.sixth {
border-radius: 3em;
border-color: #008e89;
color: #008e89;
background-image: linear-gradient(to bottom, transparent 50%, #008e89 50%);
background-position: 0% 0%;
background-size: 210%;
transition: background 150ms ease-in-out, color 150ms ease-in-out;
}
.sixth:hover {
color: #fff;
background-position: 0 100%;
}
</style>
At the end we will have something like this. You can change fonts, colors, backgrounds and all things that you want. Enjoy it.
Out Put
Video Tutorial
Please watch this video to better understand this tutorial and don’t forget to subscribe to our channel.
Help others to find out about this article on Social Media sites. If you have any doubt or any problem, don’t hesitate to contact us. Thereafter we will be able to help you and also make sure you bookmark our site on your browser.
