Skip to content

Commit 455686f

Browse files
Sulagna-Dutta-RoySulagna-Dutta-Roy
authored
Merge pull request #131 from ShivaRapolu01/3cssbuttons
Added another 3 css button animations
2 parents a0fa1d4 + 8d74501 commit 455686f

File tree

2 files changed

+120
-31
lines changed

2 files changed

+120
-31
lines changed

‎Buttons/CSS animated button/index.html

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,28 +8,33 @@
88
<title>CSS animated buttons</title>
99
</head>
1010
<body>
11-
<button class="btn btn-underline">Underline</button>
12-
<a>
13-
<div class="btn btn-border-race">
14-
15-
<!-- <a href="#"> can insert the redirecting link when needed -->
16-
<span></span>
17-
<span></span>
18-
<span></span>
19-
<span></span>
20-
Border-race
11+
<div class="content-screen">
12+
<button class="btn btn-underline">Underline</button>
13+
<a>
14+
<div class="btn btn-border-race">
2115

16+
<!-- <a href="#"> can insert the redirecting link when needed -->
17+
<span></span>
18+
<span></span>
19+
<span></span>
20+
<span></span>
21+
Border-race
22+
23+
</div>
24+
</a>
25+
<div class="btn btn-border-loop">
26+
<a>
27+
<!-- <a href="#"> can insert the redirecting link when needed -->
28+
<span></span>
29+
<span></span>
30+
<span></span>
31+
<span></span>
32+
Border-Loop
33+
</a>
2234
</div>
23-
</a>
24-
<div class="btn btn-border-loop">
25-
<a>
26-
<!-- <a href="#"> can insert the redirecting link when needed -->
27-
<span></span>
28-
<span></span>
29-
<span></span>
30-
<span></span>
31-
Border-Loop
32-
</a>
33-
</div>
35+
<button class="btn btn-border-pop">Border Pop</button>
36+
<button class="btn btn-background-slide">Background-Slide</button>
37+
<button class="btn btn-background-cover">Background-cover</button>
38+
</div>
3439
</body>
3540
</html>

‎Buttons/CSS animated button/style.css

Lines changed: 94 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ body{
1414
align-items: center;
1515
flex-wrap: wrap;
1616
}
17-
1817
.btn{
1918
font-family: sans-serif;
2019
margin:30px;
@@ -27,10 +26,95 @@ body{
2726
outline: none;
2827
position: relative;
2928
cursor: pointer;
29+
width: fit-content;
3030
letter-spacing: 1px;
3131
--background-color: #ffffff;
3232
--border-size: 2px;
3333
}
34+
.content-screen{
35+
margin-top:30px;
36+
display:flex;
37+
justify-content: space-evenly;
38+
align-items: center;
39+
flex-wrap: wrap;
40+
width:75%;
41+
}
42+
.btn.btn-border-pop::before{
43+
content:'';
44+
position: absolute;
45+
top:0;
46+
left:0;
47+
right:0;
48+
bottom:0;
49+
z-index:-1;
50+
/* background-color: red; */
51+
border: var(--border-size) solid rgb(238, 18, 18);
52+
transition: top, left, right, bottom, 100ms ease-in-out;
53+
54+
}
55+
56+
.btn.btn-border-pop:hover::before,
57+
.btn.btn-border-pop:focus::before {
58+
top: calc(var(--border-size) * -4);
59+
left: calc(var(--border-size) * -4);
60+
right: calc(var(--border-size) * -4);
61+
bottom: calc(var(--border-size) * -4);
62+
}
63+
64+
65+
.btn.btn-background-slide::before{
66+
content:'';
67+
position: absolute;
68+
top:0;
69+
left:0;
70+
right:0;
71+
bottom:0;
72+
z-index:-1;
73+
background-color: rgb(13, 48, 241);
74+
transform-origin: left;
75+
transform: scaleX(0);
76+
transition: transform 300ms ease-in-out;
77+
78+
}
79+
.btn.btn-background-slide:hover::before,.btn.btn-background-slide:focus::before{
80+
transform:scaleX(1);
81+
}
82+
83+
.btn.btn-background-slide{
84+
z-index:1;
85+
transition:color 300ms ease-in-out;
86+
/* Trick to make the background-color to display behind the text but before the background of the element */
87+
}
88+
.btn.btn-background-slide:hover,.btn.btn-background-slide:focus{
89+
color:white;
90+
}
91+
92+
.btn.btn-background-cover::before{
93+
content:'';
94+
position: absolute;
95+
top:0;
96+
right:0;
97+
left:0;
98+
bottom:0;
99+
background-color:white;
100+
z-index:-1;
101+
border-radius:50%;
102+
transition:transform 400ms ease-in-out;
103+
transform:scale(1.5)
104+
}
105+
106+
.btn.btn-background-cover{
107+
z-index:1;
108+
background-color:chartreuse;
109+
overflow:hidden;
110+
transition:color 300ms ease-in-out;
111+
}
112+
.btn.btn-background-cover:hover,.btn.btn-background-cover:focus{
113+
color:white;
114+
}
115+
.btn.btn-background-cover:hover::before,.btn.btn-background-cover:focus::before{
116+
transform:scale(0);
117+
}
34118

35119
.btn.btn-underline::before{
36120
content:'';
@@ -51,12 +135,12 @@ body{
51135
}
52136

53137

54-
a span{
138+
.btn.btn-border-race a span{
55139
display:block ;
56140
position: absolute;
57141
background: rgb(247, 11, 11);
58142
}
59-
a span:nth-child(1){
143+
.btn.btn-border-race a span:nth-child(1){
60144
/* left border */
61145
left:0;
62146
top:0;
@@ -69,11 +153,11 @@ body{
69153
/* transition-delay: 0.5s; */
70154

71155
}
72-
a:hover span:nth-child(1){
156+
.btn.btn-border-race a:hover span:nth-child(1){
73157
transform:scaleY(1);
74158
transform-origin:bottom;
75159
}
76-
a span:nth-child(2){
160+
.btn.btn-border-race a span:nth-child(2){
77161
/* top border */
78162
top:0;
79163
left:0;
@@ -84,12 +168,12 @@ body{
84168
transition: transform 0.5s;
85169
transition-delay: 0.5s;
86170
}
87-
a:hover span:nth-child(2){
171+
.btn.btn-border-race a:hover span:nth-child(2){
88172
transform:scaleX(1);
89173
transform-origin:left;
90174
}
91175

92-
a span:nth-child(3){
176+
.btn.btn-border-race a span:nth-child(3){
93177
/* bottom border */
94178
left:0;
95179
bottom:0;
@@ -101,12 +185,12 @@ body{
101185
/* transition-delay: 0.5s; */
102186

103187
}
104-
a:hover span:nth-child(3){
188+
.btn.btn-border-race a:hover span:nth-child(3){
105189
transform:scaleX(1);
106190
transform-origin:left;
107191
}
108192

109-
a span:nth-child(4){
193+
.btn.btn-border-race a span:nth-child(4){
110194
/* right border */
111195
right:0;
112196
bottom:0;
@@ -117,7 +201,7 @@ body{
117201
transition: transform 0.5s;
118202
transition-delay: 0.5s;
119203
}
120-
a:hover span:nth-child(4){
204+
.btn.btn-border-race a:hover span:nth-child(4){
121205
transform:scaleY(1);
122206
transform-origin:bottom;
123207
}

0 commit comments

Comments
 (0)