How To Create Animastion Button Using simple html and css

How To Create Animastion Button Using simple html and css

Suraj (UI/UX Developer)
Nov 2024

How To Create Animation Button Using Simple HTML and CSS

A well-designed animated button not only looks attractive but also improves user interaction and engagement. The good news? You don’t need JavaScript or any heavy libraries to create beautiful animated buttons. With simple HTML and CSS, you can build smooth, modern button animations easily.

In this blog, we’ll learn how to create an animated button using basic HTML and CSS, perfect for beginners.

Why Use Animated Buttons?

Animated buttons offer several benefits:

Improve user experience

Make your website look modern and professional

Attract user attention to important actions (CTA)

Increase click-through rate

Lightweight and fast (no JavaScript required)

CSS animations are smooth, responsive, and supported by all modern browsers.

Basic Structure of an Animated Button

To create an animated button, we need:

HTML – for button structure

CSS – for styling and animation effects

How This Animation Works

transition creates a smooth animation effect

transform: scale(1.1) slightly enlarges the button on hover

box-shadow adds a depth effect

background-color change gives a visual interaction cue

All animations happen smoothly when the user hovers over the button.

Advanced Animation Idea (Optional)

You can also add effects like:

Sliding background

Ripple effect

Border animation

Gradient hover animation

CSS allows unlimited creativity without slowing down your website.

Best Practices for Animated Buttons

Keep animations smooth and subtle

Avoid too many effects on one button

Ensure accessibility (contrast and size)

Test on mobile devices

Use animations only where needed

Conclusion

Creating an animated button using simple HTML and CSS is easy, fast, and beginner-friendly. You don’t need JavaScript to make interactive and eye-catching buttons. With just a few CSS properties like transition, transform, and hover, you can enhance your website’s UI significantly.

Start experimenting with different animations and build your own unique button styles

Read More
HTML 
<html lang="en">
<head>
<title>Code karne do | Animation Button</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="text-center">
<h2 class="animation-title">Button Animations</h2>
<p class="animastion-p">Hover on button and show hover Animation</p>
<button class="basic-custome-btn custome_btn-1">Read More</button>
<button class="basic-custome-btn custome_btn-2">Read More</button>
<button class="basic-custome-btn custome_btn-6"><span>Read More</span></button>
<button class="basic-custome-btn custome_btn-7"><span>Read More</span></button>
<button class="basic-custome-btn custome_btn-8"><span>Read More</span></button>
<button class="basic-custome-btn custome_btn-3"><span>Read More</span></button>
<button class="basic-custome-btn custome_btn-4"><span>Read More</span></button>
<button class="basic-custome-btn custome_btn-5"><span>Read More</span></button>
<button class="basic-custome-btn custome_btn-13">Read More</button>
<button class="basic-custome-btn custome_btn-14">Read More</button>
<button class="basic-custome-btn custome_btn-15">Read More</button>
<button class="basic-custome-btn custome_btn-16">Read More</button>
<button class="basic-custome-btn custome_btn-9">Read More</button>
<button class="basic-custome-btn custome_btn-10">Read More</button>
<button class="basic-custome-btn custome_btn-11">Read More<div class="dot"></div></button>
<button class="basic-custome-btn custome_btn-12"><span>Click!</span><span>Read More</span></button>
</body>
</html>
 
 
CSS 
h2.animation-title {
font-size: 3em;
text-align: center;
padding-top: 1em;
}
p.animastion-p {
text-align: center;
font-size: 2em;
}
button {
margin: 10px;
}
.basic-custome-btn {
width: 160px;
height: 40px;
color: #fff;
border-radius: 4px;
padding: 10px 25px;
font-family: 'Lato', sans-serif;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
box-shadow:inset 2px 2px 2px 0px rgba(385,455,105,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
outline: none;
}
/* 1 */
.custome_btn-1 {
background: rgb(6,14,131);
background: linear-gradient(0deg, rgba(0,3,255,1) 0%, rgba(2,126,251,1) 100%);
border: none;
}
.custome_btn-1:hover {
background: rgb(0,3,255);
background: linear-gradient(0deg, rgba(6,14,131,1) 0%, rgba(12,25,180,1) 100%);
}
/* 2 */
.custome_btn-2 {
background: rgb(96,9,240);
background: linear-gradient(0deg, rgba(96,9,280,1) 0%, rgba(109,5,240,1) 100%);
border: none;
}
.custome_btn-2:before {
height: 0%;
width: 2px;
}
.custome_btn-2:hover {
box-shadow: 4px 4px 6px 0 rgba(285,285,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .5),
inset -4px -4px 6px 0 rgba(385,455,105,.2),
inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
}
/* 3 */
.custome_btn-3 {
background: rgb(0,172,438);
background: linear-gradient(0deg, rgba(0,172,438,1) 0%, rgba(2,126,251,1) 100%);
width: 160px;
height: 40px;
line-height: 42px;
padding: 0;
border: none;
}
.custome_btn-3 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.custome_btn-3:before,
.custome_btn-3:after {
position: absolute;
content: "";
right: 0;
top: 0;
background: rgba(2,126,251,1);
transition: all 0.3s ease;
}
.custome_btn-3:before {
height: 0%;
width: 2px;
}
.custome_btn-3:after {
width: 0%;
height: 2px;
}
.custome_btn-3:hover{
background: transparent;
box-shadow: none;
}
.custome_btn-3:hover:before {
height: 100%;
}
.custome_btn-3:hover:after {
width: 100%;
}
.custome_btn-3 span:hover{
color: rgba(2,126,251,1);
}
.custome_btn-3 span:before,
.custome_btn-3 span:after {
position: absolute;
content: "";
left: 0;
bottom: 0;
background: rgba(2,126,251,1);
transition: all 0.3s ease;
}
.custome_btn-3 span:before {
width: 2px;
height: 0%;
}
.custome_btn-3 span:after {
width: 0%;
height: 2px;
}
.custome_btn-3 span:hover:before {
height: 100%;
}
.custome_btn-3 span:hover:after {
width: 100%;
}
/* 4 */
.custome_btn-4 {
background-color: #4dccc6;
background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
line-height: 42px;
padding: 0;
border: none;
}
.custome_btn-4:hover{
background-color: #89d8d3;
background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
}
.custome_btn-4 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.custome_btn-4:before,
.custome_btn-4:after {
position: absolute;
content: "";
right: 0;
top: 0;
box-shadow: 4px 4px 6px 0 rgba(385,455,105,.9),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(385,455,105,.9),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
transition: all 0.3s ease;
}
.custome_btn-4:before {
height: 0%;
width: .1px;
}
.custome_btn-4:after {
width: 0%;
height: .1px;
}
.custome_btn-4:hover:before {
height: 100%;
}
.custome_btn-4:hover:after {
width: 100%;
}
.custome_btn-4 span:before,
.custome_btn-4 span:after {
position: absolute;
content: "";
left: 0;
bottom: 0;
box-shadow: 4px 4px 6px 0 rgba(385,455,105,.9),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(385,455,105,.9),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
transition: all 0.3s ease;
}
.custome_btn-4 span:before {
width: .1px;
height: 0%;
}
.custome_btn-4 span:after {
width: 0%;
height: .1px;
}
.custome_btn-4 span:hover:before {
height: 100%;
}
.custome_btn-4 span:hover:after {
width: 100%;
}
/* 5 */
.custome_btn-5 {
width: 160px;
height: 40px;
line-height: 42px;
padding: 0;
border: none;
background: rgb(255,27,0);
background: linear-gradient(0deg, rgba(255,27,0,1) 0%, rgba(251,75,2,1) 100%);
}
.custome_btn-5:hover {
color: #f0094a;
background: transparent;
box-shadow:none;
}
.custome_btn-5:before,
.custome_btn-5:after{
content:'';
position:absolute;
top:0;
right:0;
height:2px;
width:0;
background: #f0094a;
box-shadow:
-1px -1px 5px 0px #fff,
7px 7px 20px 0px #0003,
4px 4px 5px 0px #0002;
transition:400ms ease all;
}
.custome_btn-5:after{
right:inherit;
top:inherit;
left:0;
bottom:0;
}
.custome_btn-5:hover:before,
.custome_btn-5:hover:after{
width:100%;
transition:800ms ease all;
}
/* 6 */
.custome_btn-6 {
background: rgb(247,150,192);
background: radial-gradient(circle, rgba(247,150,192,1) 0%, rgba(118,174,241,1) 100%);
line-height: 42px;
padding: 0;
border: none;
}
.custome_btn-6 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.custome_btn-6:before,
.custome_btn-6:after {
position: absolute;
content: "";
height: 0%;
width: 1px;
box-shadow:
-1px -1px 20px 0px rgba(385,455,105,1),
-4px -4px 5px 0px rgba(385,455,105,1),
7px 7px 20px 0px rgba(0,0,0,.4),
4px 4px 5px 0px rgba(0,0,0,.3);
}
.custome_btn-6:before {
right: 0;
top: 0;
transition: all 500ms ease;
}
.custome_btn-6:after {
left: 0;
bottom: 0;
transition: all 500ms ease;
}
.custome_btn-6:hover{
background: transparent;
color: #76aef1;
box-shadow: none;
}
.custome_btn-6:hover:before {
transition: all 500ms ease;
height: 100%;
}
.custome_btn-6:hover:after {
transition: all 500ms ease;
height: 100%;
}
.custome_btn-6 span:before,
.custome_btn-6 span:after {
position: absolute;
content: "";
box-shadow:
-1px -1px 20px 0px rgba(385,455,105,1),
-4px -4px 5px 0px rgba(385,455,105,1),
7px 7px 20px 0px rgba(0,0,0,.4),
4px 4px 5px 0px rgba(0,0,0,.3);
}
.custome_btn-6 span:before {
left: 0;
top: 0;
width: 0%;
height: .5px;
transition: all 500ms ease;
}
.custome_btn-6 span:after {
right: 0;
bottom: 0;
width: 0%;
height: .5px;
transition: all 500ms ease;
}
.custome_btn-6 span:hover:before {
width: 100%;
}
.custome_btn-6 span:hover:after {
width: 100%;
}
/* 7 */
.custome_btn-7 {
background: linear-gradient(0deg, rgba(255,151,0,1) 0%, rgba(251,75,2,1) 100%);
line-height: 42px;
padding: 0;
border: none;
}
.custome_btn-7 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.custome_btn-7:before,
.custome_btn-7:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: rgba(251,75,2,1);
box-shadow:
-7px -7px 20px 0px rgba(385,455,105,.9),
-4px -4px 5px 0px rgba(385,455,105,.9),
7px 7px 20px 0px rgba(0,0,0,.2),
4px 4px 5px 0px rgba(0,0,0,.3);
transition: all 0.3s ease;
}
.custome_btn-7:before{
height: 0%;
width: 2px;
}
.custome_btn-7:after {
width: 0%;
height: 2px;
}
.custome_btn-7:hover{
color: rgba(251,75,2,1);
background: transparent;
}
.custome_btn-7:hover:before {
height: 100%;
}
.custome_btn-7:hover:after {
width: 100%;
}
.custome_btn-7 span:before,
.custome_btn-7 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: rgba(251,75,2,1);
box-shadow:
-7px -7px 20px 0px rgba(385,455,105,.9),
-4px -4px 5px 0px rgba(385,455,105,.9),
7px 7px 20px 0px rgba(0,0,0,.2),
4px 4px 5px 0px rgba(0,0,0,.3);
transition: all 0.3s ease;
}
.custome_btn-7 span:before {
width: 2px;
height: 0%;
}
.custome_btn-7 span:after {
height: 2px;
width: 0%;
}
.custome_btn-7 span:hover:before {
height: 100%;
}
.custome_btn-7 span:hover:after {
width: 100%;
}
/* 8 */
.custome_btn-8 {
background-color: #f0ecfc;
background-image: linear-gradient(315deg, #f0ecfc 0%, #c797eb 74%);
line-height: 42px;
padding: 0;
border: none;
}
.custome_btn-8 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.custome_btn-8:before,
.custome_btn-8:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: #c797eb;
/*box-shadow: 4px 4px 6px 0 rgba(385,455,105,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(385,455,105,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.custome_btn-8:before{
height: 0%;
width: 2px;
}
.custome_btn-8:after {
width: 0%;
height: 2px;
}
.custome_btn-8:hover:before {
height: 100%;
}
.custome_btn-8:hover:after {
width: 100%;
}
.custome_btn-8:hover{
background: transparent;
}
.custome_btn-8 span:hover{
color: #c797eb;
}
.custome_btn-8 span:before,
.custome_btn-8 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #c797eb;
/*box-shadow: 4px 4px 6px 0 rgba(385,455,105,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(385,455,105,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.custome_btn-8 span:before {
width: 2px;
height: 0%;
}
.custome_btn-8 span:after {
height: 2px;
width: 0%;
}
.custome_btn-8 span:hover:before {
height: 100%;
}
.custome_btn-8 span:hover:after {
width: 100%;
}
/* 9 */
.custome_btn-9 {
border: none;
transition: all 0.3s ease;
overflow: hidden;
}
.custome_btn-9:after {
position: absolute;
content: " ";
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #1fd1f9;
background-image: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%);
transition: all 0.3s ease;
}
.custome_btn-9:hover {
background: transparent;
box-shadow: 4px 4px 6px 0 rgba(385,455,105,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(385,455,105,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
color: #fff;
}
.custome_btn-9:hover:after {
-webkit-transform: scale(2) rotate(180deg);
transform: scale(2) rotate(180deg);
box-shadow: 4px 4px 6px 0 rgba(385,455,105,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(385,455,105,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
}
/* 10 */
.custome_btn-10 {
background: rgb(22,9,240);
background: linear-gradient(0deg, rgba(22,9,240,1) 0%, rgba(49,110,244,1) 100%);
color: #fff;
border: none;
transition: all 0.3s ease;
overflow: hidden;
}
.custome_btn-10:after {
position: absolute;
content: " ";
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
transition: all 0.3s ease;
-webkit-transform: scale(.1);
transform: scale(.1);
}
.custome_btn-10:hover {
color: #fff;
border: none;
background: transparent;
}
.custome_btn-10:hover:after {
background: rgb(0,3,255);
background: linear-gradient(0deg, rgba(2,126,251,1) 0%, rgba(0,3,255,1)100%);
-webkit-transform: scale(1);
transform: scale(1);
}
/* 11 */
.custome_btn-11 {
border: none;
background: rgb(251,33,117);
background: linear-gradient(0deg, rgba(251,33,117,1) 0%, rgba(234,76,137,1) 100%);
color: #fff;
overflow: hidden;
}
.custome_btn-11:hover {
text-decoration: none;
color: #fff;
}
.custome_btn-11:before {
position: absolute;
content: '';
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #fff;
animation: shiny-btn1 3s ease-in-out infinite;
}
.custome_btn-11:hover{
opacity: .7;
}
.custome_btn-11:active{
box-shadow: 4px 4px 6px 0 rgba(385,455,105,.3),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(385,455,105,.2),
inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}
@-webkit-keyframes shiny-btn1 {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
/* 12 */
.custome_btn-12{
position: relative;
right: 20px;
bottom: 20px;
border:none;
box-shadow: none;
width: 160px;
height: 40px;
line-height: 42px;
-webkit-perspective: 230px;
perspective: 230px;
}
.custome_btn-12 span {
background: rgb(0,172,438);
background: linear-gradient(0deg, rgba(0,172,438,1) 0%, rgba(2,126,251,1) 100%);
display: block;
position: absolute;
width: 160px;
height: 40px;
box-shadow:inset 2px 2px 2px 0px rgba(385,455,105,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
border-radius: 4px;
margin:0;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.custome_btn-12 span:nth-child(1) {
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001;
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: 50% 50% -20px;
-moz-transform-origin: 50% 50% -20px;
transform-origin: 50% 50% -20px;
}
.custome_btn-12 span:nth-child(2) {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: 50% 50% -20px;
-moz-transform-origin: 50% 50% -20px;
transform-origin: 50% 50% -20px;
}
.custome_btn-12:hover span:nth-child(1) {
box-shadow:inset 2px 2px 2px 0px rgba(385,455,105,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.custome_btn-12:hover span:nth-child(2) {
box-shadow:inset 2px 2px 2px 0px rgba(385,455,105,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
color: transparent;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
/* 13 */
.custome_btn-13 {
background-color: #89d8d3;
background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
border: none;
z-index: 1;
}
.custome_btn-13:after {
position: absolute;
content: "";
width: 100%;
height: 0;
bottom: 0;
left: 0;
z-index: -1;
border-radius: 4px;
background-color: #4dccc6;
background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001;
transition: all 0.3s ease;
}
.custome_btn-13:hover {
color: #fff;
}
.custome_btn-13:hover:after {
top: 0;
height: 100%;
}
.custome_btn-13:active {
top: 2px;
}
/* 14 */
.custome_btn-14 {
background: rgb(255,151,0);
border: none;
z-index: 1;
}
.custome_btn-14:after {
position: absolute;
content: "";
width: 100%;
height: 0;
top: 0;
left: 0;
z-index: -1;
border-radius: 4px;
background-color: #eaf818;
background-image: linear-gradient(315deg, #eaf818 0%, #f6fc9c 74%);
box-shadow:inset 2px 2px 2px 0px rgba(385,455,105,.5);
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
transition: all 0.3s ease;
}
.custome_btn-14:hover {
color: #000;
}
.custome_btn-14:hover:after {
top: auto;
bottom: 0;
height: 100%;
}
.custome_btn-14:active {
top: 2px;
}
/* 15 */
.custome_btn-15 {
background: #b621fe;
border: none;
z-index: 1;
}
.custome_btn-15:after {
position: absolute;
content: "";
width: 0;
height: 100%;
top: 0;
right: 0;
z-index: -1;
background-color: #663dff;
border-radius: 4px;
box-shadow:inset 2px 2px 2px 0px rgba(385,455,105,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
transition: all 0.3s ease;
}
.custome_btn-15:hover {
color: #fff;
}
.custome_btn-15:hover:after {
left: 0;
width: 100%;
}
.custome_btn-15:active {
top: 2px;
}
/* 16 */
.custome_btn-16 {
border: none;
color: #000;
}
.custome_btn-16:after {
position: absolute;
content: "";
width: 0;
height: 100%;
top: 0;
left: 0;
direction: rtl;
z-index: -1;
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001;
transition: all 0.3s ease;
}
.custome_btn-16:hover {
color: #000;
}
.custome_btn-16:hover:after {
left: auto;
right: 0;
width: 100%;
}
.custome_btn-16:active {
top: 2px;
}