-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathlike-btn.css
52 lines (46 loc) · 1.65 KB
/
like-btn.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
/* Chrome, Safari, Opera */
@-webkit-keyframes follow-animation {
from {background: white; color: #3399FF; width: 85px; left: 50px;}
to {background: #2EB82E; border-color: #2EB82E; color: #ffffff; width: 120px; left: 35px;}
}
@-webkit-keyframes unfollow-animation {
from {background: #2EB82E; color: #ffffff; width: 120px; left: 35px;}
to {background: white; border-color: #3399FF; color: #3399FF; width: 85px; left: 50px;}
}
/* Standard syntax */
@keyframes follow-animation {
from {background: white; color: #3399FF; width: 85px; left: 50px;}
to {background: #2EB82E; border-color: #2EB82E; color: #ffffff; width: 120px; left: 35px;}
}
@keyframes unfollow-animation {
from {background: #2EB82E; color: #ffffff; width: 120px; left: 35px;}
to {background: white; border-color: #3399FF; color: #3399FF; width: 85px; left: 50px;}
}
input {
-webkit-appearance: none;
}
input:after {
color: #3399FF;
font-family: "Helvetica";
font-size: 10pt;
background-color: #ffffff;
border: 1px solid;
border-color: #3399FF;
border-radius: 3px;
cursor: hand;
display: inline-block;
text-align: center;
padding: 5px 15px;
content: '+ Like';
-webkit-animation: unfollow-animation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-animation-fill-mode:forwards;
animation: unfollow-animation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation-fill-mode:forwards;
}
input:checked:after {
content: 'Liked!';
-webkit-animation: follow-animation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-animation-fill-mode:forwards;
animation: follow-animation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation-fill-mode:forwards;
}