-
Notifications
You must be signed in to change notification settings - Fork 0
/
Instagram.css
56 lines (49 loc) · 1.06 KB
/
Instagram.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
:root {
--icon: #ffffff;
--icon-hover: #ffffff;
--gradient-normal: #e9a61d, #ef3738, #9d24ce;
--gradient-hover: #cb8f17, #bc2323, #721597;
--pulse: #ef3738;
--icon-hover-speed: 0.5s;
--background-hover-speed: 0.5s;
--pulse-speed: 3s;
}
.icon {
width: 30px;
height: 30px;
fill: var(--icon);
transition: fill var(--icon-hover-speed);
}
.instagram-float {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
cursor: pointer;
width: 60px;
height: 60px;
bottom: 30px;
right: 30px;
transition: background var(--background-hover-speed);
background: linear-gradient(45deg, var(--gradient-normal));
border-radius: 50px;
z-index: 1000000;
animation: pulse var(--pulse-speed) infinite;
}
.instagram-float:hover {
background: linear-gradient(45deg, var(--gradient-hover));
}
.instagram-float:hover .icon {
fill: var(--icon-hover);
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 var(--pulse);
}
50% {
box-shadow: 0 0 0 20px #ffffff00;
}
100% {
box-shadow: 0 0 0 0 #ffffff00;
}
}