Create CSS Animated Button using Hover effect

March 10, 2019

Learn How to Create Animated Button Using CSS.

Tutorial Level : beginners (Any buddy Who has Basic Knowledge of HTML and CSS can create this Button)

Code :

<!DOCTYPE html>
<html>
<head>
 <title>Animation button</title>

<style type="text/css">

*{
 margin: 0px;
 padding: 0px;
}

div{
 margin: 20%;
}

body{
 background-color: #262626;
}

/* Now Creating Button CSS */

button{
 font-size: 24px;
 padding: 20px 40px;
 border: 2px solid royalblue;
 border-radius: 10px;
 position: relative;
 background: transparent;
 color: white;
    cursor: pointer;
    overflow: hidden;
}

/* Creating After Button */

button::after{
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 background-color: royalblue;
 width: 0;
 height: 0;
 transition: 1s;
 transform: translate(-50%, -50%);
 border-radius: 50%;
 z-index: -1;
}

button:hover::after{
     width: 160px;
     height: 160px; 
}

</style>
</head>
<body>

<div>
 <button>Button</button>

</div>
</body>
</html>