How to animate buttons using CSS?

CSS Web Development Front End Technology

Following is the code to animate buttons with CSS −

Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
button {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   position: relative;
   background-color: rgb(100, 0, 84);
   border: none;
   font-size: 28px;
   color: rgb(255, 169, 255);
   padding: 20px;
   width: 200px;
   text-align: center;
   -webkit-transition-duration: 0.4s;
   box-shadow: 5px 10px 18px rgb(121, 82, 185);
   transition-duration: 0.4s;
   text-decoration: none;
   overflow: hidden;
   cursor: pointer;
}
button:after {
   content: "";
   background: rgb(251, 255, 0);
   display: block;
   position: absolute;
   padding-top: 300%;
   padding-left: 350%;
   margin-left: -20px;
   margin-top: -120%;
   opacity: 0;
   transition: all 0.8s
}
button:active:after {
   padding: 0;
   margin: 0;
   opacity: 1;
   transition: 0s
}
</style>
</head>
<body>
<h1>Animated Button Example</h1>
<button>Click Here</button>
<h1>Click on the above button to see ripple effect</h1>
</body>
</html>

Output

The above code will produce the following output −

AmitDiwan

Published on 08-Apr-2020 08:27:19

Previous Page Print Page