Vote Counter in Material Design

Image: Vote Counter in Material Design GIF

If you want to showcase a voting interface in your next project with a strong material design influence then this upvote counter by Gregor Adams is just want you need. When you click on the round button the counter is incremented by one and it adds a background colour.

If you are having trouble with the pen, try the archived copy on GitHub

Up Vote Snippet

.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")

view raw
index.pug
hosted with ❤ by GitHub

@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
}
}
}

view raw
style.scss
hosted with ❤ by GitHub

Posted by:Hima Vincent

Hima Vincent is the founder & editor in chief of CodeMyUI. She is a writer by day and a reader by night who helps web designers build awesome projects by sharing amazing code snippets for inspiration. Hobbies include designing, card games, photography and exploring the culinary arts.