Skip to content

Commit 5e81f6b

Browse files
HarshVR1947HarshVR1947
authored
Create Animated Buttons in HTML
HTML file containing 4 Animated buttons
1 parent e06695a commit 5e81f6b

File tree

1 file changed

+115
-0
lines changed

1 file changed

+115
-0
lines changed

‎Coding/HTML/Animated Buttons in HTML‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Question no.3</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<style>
7+
.button1 {
8+
position: relative;
9+
background-color: #04AA6D;
10+
border: none;
11+
font-size: 28px;
12+
color: #FFFFFF;
13+
padding: 20px;
14+
width: 200px;
15+
text-align: center;
16+
-webkit-transition-duration: 0.4s;
17+
transition-duration: 0.4s;
18+
text-decoration: none;
19+
overflow: hidden;
20+
cursor: pointer;
21+
}
22+
23+
.button1:after {
24+
content: "";
25+
background: #90EE90;
26+
display: block;
27+
position: absolute;
28+
padding-top: 300%;
29+
padding-left: 350%;
30+
margin-left: -20px!important;
31+
margin-top: -120%;
32+
opacity: 0;
33+
transition: all 0.8s
34+
}
35+
36+
.button1:active:after {
37+
padding: 0;
38+
margin: 0;
39+
opacity: 1;
40+
transition: 0s
41+
}
42+
.button2 {
43+
padding: 15px 25px;
44+
font-size: 24px;
45+
text-align: center;
46+
cursor: pointer;
47+
outline: none;
48+
color: #fff;
49+
background-color: #ec0b0b;
50+
border: none;
51+
border-radius: 15px;
52+
box-shadow: 0 9px #999;
53+
}
54+
55+
.button2:hover {background-color: #ec0b0b}
56+
57+
.button2:active {
58+
background-color: #ec0b0b;
59+
box-shadow: 0 5px #666;
60+
transform: translateY(4px);
61+
}
62+
.button3 {
63+
background-color: #eec890;
64+
border: none;
65+
color: white;
66+
padding: 16px 32px;
67+
text-align: center;
68+
font-size: 16px;
69+
margin: 4px 2px;
70+
opacity: 0.6;
71+
transition: 0.3s;
72+
}
73+
74+
.button3:hover {opacity: 1}
75+
.button4 {
76+
background-color: #f4511e;
77+
border: none;
78+
color: white;
79+
padding: 16px 32px;
80+
text-align: center;
81+
font-size: 16px;
82+
margin: 4px 2px;
83+
opacity: 1;
84+
transition: 0.3s;
85+
}
86+
87+
.button4:hover {opacity: 0.6}
88+
.button5 {
89+
background-color: #ddd;
90+
border: none;
91+
color: black;
92+
padding: 16px 32px;
93+
text-align: center;
94+
font-size: 16px;
95+
margin: 4px 2px;
96+
transition: 0.3s;
97+
}
98+
99+
.button5:hover {
100+
background-color: #3e8e41;
101+
color: white;
102+
}
103+
</style>
104+
</head>
105+
<body>
106+
107+
<h2>Animated Button - Animation Effect</h2>
108+
109+
<button class="button1">Click Me</button>
110+
<button class="button2">Click Me</button>
111+
<button class="button3">Hover</button>
112+
<button class="button4">Hover</button>
113+
<button class="button5">Hover</button>
114+
</body>
115+
</html>

0 commit comments

Comments
 (0)