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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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") |
material-design vote up animation
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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 | |
| } | |
| } | |
| } | |