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
Video Tutorial
Watch video tutorial on how to create Button Bounce Effect using CSS.