How To Create Animastion Button Using simple html and css
<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 के साथ एनिमेट करना बहुत आसान है। नीचे कुछ तरीके दिए गए हैं जिनसे आप CSS का उपयोग करके बटन में विभिन्न प्रकार के एनिमेशन जोड़ सकते हैं।
1. साधारण Hover Effect
इस एनिमेशन में, जब हम बटन पर माउस लाते हैं, तो उसका रंग बदल जाता है।
बटन में CSS के माध्यम से एनिमेशन जोड़ने के लिए, नीचे कुछ स्टाइलिश उदाहरण दिए गए हैं जो आपके बटन को आकर्षक और इंटरैक्टिव बना सकते हैं।
1. रंग बदलने वाला बटन (Color Transition)
इसमें बटन पर माउस ले जाने पर उसका बैकग्राउंड रंग बदलता है।
यहां कुछ CSS का उपयोग करके विभिन्न प्रकार के बटन एनिमेशन के उदाहरण दिए गए हैं। ये एनिमेशन बटन को आकर्षक और इंटरैक्टिव बना सकते हैं।
1. साधारण रंग परिवर्तन होवर इफेक्ट
इस उदाहरण में, बटन पर माउस ले जाने पर उसका रंग बदलता है।
1. साधारण Hover Effect
इस एनिमेशन में, जब हम बटन पर माउस लाते हैं, तो उसका रंग बदल जाता है।
2. Scale Animation
इस एनिमेशन में, बटन थोड़ा बड़ा हो जाता है जब हम उस पर माउस ले जाते हैं।
3. बटन का स्लाइडिंग अंडरलाइन
इसमें हम बटन के नीचे एक लाइन दिखाते हैं जो एनिमेट होती है।
4. बटन में बॉक्स-शैडो एनिमेशन
इसमें, बटन में होवर करने पर बॉक्स शैडो का प्रभाव दिखाया गया है।
5. बटन में Rotate Effect
इस एनिमेशन में बटन को घुमाया गया है।
इन तरीकों से आप CSS के माध्यम से बटन एनिमेशन आसानी से कर सकते हैं।
बटन एनिमेशन बनाना बहुत आसान है और CSS का उपयोग करके इसे शानदार दिखाया जा सकता है। यहां कुछ बटन एनिमेशन के उदाहरण दिए गए हैं जो 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;
}
empty
Comments (0 )
Leave A Comment