Inspired by https://dribbble.com/shots/1987397-Materialup-Upvote-Animation?list=buckets&offset=1
Suggested by: https://twitter.com/mattaussaguel
A Pen by Gregor Adams on CodePen.
.button() | |
input(type="radio" id="vote_up" name="vote") | |
input(type="radio" id="vote_down" name="vote") | |
.bg | |
.icon. | |
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><path d="M10.5 21l7.5-7.5 7.5 7.5z"/></svg> | |
.count 23 | |
.count-up 24 | |
label(for="vote_up") | |
label(for="vote_down") |
Inspired by https://dribbble.com/shots/1987397-Materialup-Upvote-Animation?list=buckets&offset=1
Suggested by: https://twitter.com/mattaussaguel
A Pen by Gregor Adams on CodePen.
@import url(https://fonts.googleapis.com/css?family=RobotoDraft:400); | |
@import url(https://fonts.googleapis.com/css?family=Roboto:400); | |
.button { | |
$size: 56px; | |
$speed: 0.3s; | |
$bg-default: #E0E0E0; | |
$bg-active: #FF4081; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
height: $size; | |
width: $size; | |
margin: $size/-2; | |
border-radius: 100%; | |
background: none;; | |
font-family: "Roboto Draft", Roboto, sans-serif; | |
font-size: 13px; | |
overflow: hidden; | |
user-select: none; | |
input { | |
position: absolute; | |
left: 50%; | |
top: 50%;; | |
transform: translate(-50%, -50%); | |
} | |
label { | |
cursor: pointer; | |
position: absolute; | |
top: 0; | |
left: 0; | |
height: 100%; | |
width: 100%; | |
z-index: 2; | |
&[for="vote_down"] { | |
display: none; | |
} | |
&[for="vote_up"] { | |
display: block; | |
} | |
} | |
#vote_up:checked ~{ | |
label[for="vote_up"] { | |
display: none; | |
} | |
label[for="vote_down"] { | |
display: block; | |
} | |
} | |
.bg { | |
position: absolute; | |
top: 0; | |
left: 0; | |
height: 100%; | |
width: 100%; | |
border-radius: inherit; | |
animation: null $speed forwards; | |
box-shadow: | |
0 0 0 0 $bg-active inset, | |
0 0 0 $size/2 $bg-default inset; | |
} | |
.icon, .count, .count-up { | |
position: absolute; | |
top: 0; | |
left: 0; | |
height: 100%; | |
width: 100%; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
transition: transform $speed; | |
} | |
.icon svg { | |
margin-bottom: 2em; | |
transition-delay: 0.1s | |
} | |
.count { | |
transform: translate3d(0,0,0); | |
color: #000; | |
transition-delay: 0s | |
} | |
.count-up { | |
transform: translate3d(0,100%,0); | |
color: #fff; | |
} | |
@keyframes up { | |
0% { | |
box-shadow: | |
0 0 0 $size/2 $bg-default inset, | |
0 0 0 $size/2 $bg-active inset; | |
} | |
100% { | |
box-shadow: | |
0 0 0 0 $bg-default inset, | |
0 0 0 $size/2 $bg-active inset; | |
} | |
} | |
@keyframes down { | |
0% { | |
box-shadow: | |
0 0 0 $size/2 $bg-active inset, | |
0 0 0 $size/2 $bg-default inset; | |
} | |
100% { | |
box-shadow: | |
0 0 0 0 $bg-active inset, | |
0 0 0 $size/2 $bg-default inset; | |
} | |
} | |
#vote_down:checked ~ { | |
.bg { | |
animation-name: down; | |
} | |
} | |
#vote_up:checked ~ { | |
.bg { | |
animation-name: up; | |
} | |
.icon { | |
transform: translate3d(0,-100%,0); | |
transition-delay: 0s | |
} | |
.count-up { | |
transform: translate3d(0,0,0); | |
} | |
.count { | |
transform: translate3d(0,-100%,0); | |
transition-delay: 0.1s | |
} | |
} | |
} | |