* {
margin
:
0
;
padding
:
0
;
box-sizing: border-box;
}
body {
background-color
:
#000
;
text-align
:
center
;
padding
:
20
vh;
}
h
2
{
text-align
:
center
;
color
: aquamarine;
position
:
absolute
;
top
:
10
vh;
left
:
43
vw;
}
.btn:link,
.btn:visited {
text-transform
:
uppercase
;
text-decoration
:
none
;
position
:
relative
;
transition:
all
.
2
s;
margin
:
5
vh;
}
.btn:hover {
transform: translateY(
-10px
);
box-shadow:
0
10px
100px
;
}
.btn:active {
transform: translateX(
0
);
box-shadow:
0
20px
50px
;
}
.head_button {
background-color
:
#fff
;
padding
:
10px
40px
;
border-radius:
70px
;
display
: inline-
block
;
animation-name: todown;
animation-duration:
5
s;
}
.head_button_
2
{
background-color
: rgba(
214
,
200
,
3
,
0.705
);
padding
:
10px
40px
;
border-radius:
70px
;
display
: inline-
block
;
animation-name: todown;
animation-duration:
5
s;
color
: rgba(
13
,
105
,
13
,
0.829
);
}
.head_button_
3
{
background-color
: rgba(
172
,
16
,
16
,
0.705
);
padding
:
10px
40px
;
border-radius:
70px
;
display
: inline-
block
;
animation-name: todown;
animation-duration:
5
s;
color
:
#000
;
}
.head_button_
4
{
background-color
: rgba(
16
,
172
,
37
,
0.705
);
padding
:
10px
40px
;
border-radius:
70px
;
display
: inline-
block
;
animation-name: todown;
animation-duration:
5
s;
color
:
aqua
;
}
.btn::after {
content
:
''
;
display
: inline-
block
;
height
:
100%
;
width
:
100%
;
border-radius:
100px
;
position
:
absolute
;
top
:
0
;
left
:
0
;
z-index
:
-1
;
transition:
all
.
4
s;
}
.head_button::after {
background-color
:
#fff
;
}
.head_button_
2:
:after {
background-color
: rgba(
131
,
15
,
15
,
0.801
);
}
.head_button_
3:
:after {
background-color
: rgba(
15
,
131
,
31
,
0.801
);
}
.head_button_
4:
:after {
background-color
: rgba(
131
,
15
,
116
,
0.801
);
}
.btn:hover::after {
transform: scale(
1.5
);
opacity:
0
;
}
@keyframes todown {
0%
{
opacity:
0
;
transform: translateY(
-150px
);
}
60%
{
opacity:
0.6
;
transform: translateY(
20px
);
}
100%
{
opacity:
1
;
transform: translateY(
0
);
}
}