simple link website
digi.rip
animations! - tagline wobbles. just for fun - buttons now ease between states using animations instead of a hard cut. tiny change but it looks nice
+37
-6
+37
-6
style.css
+37
-6
style.css
···
28
28
text-shadow: 3px 3px 0 var(--shadow-color);
29
29
}
30
30
31
+
@keyframes wobble {
32
+
from {
33
+
transform: rotateZ(-3deg);
34
+
}
35
+
to {
36
+
transform: rotateZ(3deg);
37
+
}
38
+
}
39
+
40
+
@keyframes hover {
41
+
from {
42
+
box-shadow: 4px 6px 0 var(--shadow-color);
43
+
transform: translateY(0px);
44
+
}
45
+
to {
46
+
box-shadow: 3px 4px 0 var(--shadow-color);
47
+
transform: translateY(1px);
48
+
}
49
+
}
50
+
51
+
@keyframes press {
52
+
from {
53
+
box-shadow: 3px 4px 0 var(--shadow-color);
54
+
transform: translateY(1px);
55
+
}
56
+
to {
57
+
box-shadow: -1.2px -1.2px 0 var(--shadow-color);
58
+
transform: translateY(2px);
59
+
}
60
+
}
61
+
62
+
h3 {
63
+
animation: wobble 2s alternate infinite;
64
+
}
65
+
31
66
a {
32
67
display: inline-block;
33
68
text-decoration: none;
···
41
76
}
42
77
43
78
a:hover {
44
-
color: var(--button-text-color);
45
-
transform: translateY(1px);
46
-
box-shadow: 3px 4px 0 var(--shadow-color);
79
+
animation: hover 0.1s forwards;
47
80
}
48
81
49
82
a:active {
50
-
color: var(--button-text-color);
51
-
transform: translateY(2px);
52
-
box-shadow: 0px 0px 0 var(--shadow-color);
83
+
animation: press 0.1s forwards;
53
84
}
54
85
55
86
.links-container {