Button Bounce Effect using CSS

In this tutorial we will see how to create Button Bounce Effect using CSS. This animation is created using transform and animation properties of CSS.

Table of Contents

HTML Code

HTML Code is given below.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Button Bounce Effect using CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button>How To Code School</button>
</body>
</html>

CSS Code

CSS Code is given below.

body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh; }
button {
background-color:#22438C;
padding: 20px 40px;
font-size: 30px;
border: none;
border-radius: 10px;
color: #fff;
cursor: pointer; }
@keyframes bounce {
0%, 25%, 50%, 75%, 90%, 100% {
transform: translateY(0); }
15%,40% {
transform: translateY(-20px); }
65% ,80% {
transform: translateY(-15px); }
95% {
transform: translateY(-5px); } }
button:hover {
animation: bounce 2s linear; }

Demo

Check Demo

Video Tutorial

Watch video tutorial on how to create Button Bounce Effect using CSS.