Just CSS: CSS Like Button Animation
Hey There! Here is my simple "like" animation that uses only CSS.
I like to use the checkbox for my CSS animations so first we are going to begin with a quick boilerplate.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> <title>Like</title></head><input type="checkbox" class="like-btn"><i class="fa fa-heart"></i></input></body></html>
And CSS:
* { margin: 0; padding: 0; box-sizing: border-box; } :root{ --like-font-size: 3rem } body { background: blueviolet; display: flex; justify-content: center; align-items: center; min-height: 100vh; -webkit-font-smoothing: antialiased; }
Isolating a component into a separate file helps clarify the process, and present it as a separate piece of code. This makes it our job easier when we transport things into react/vue apps later on.
1. The Checkbox
You will be creating a checkbox element in your HTML that will access the state of an element without JavaScript. Our checkbox must lay overtop the heart-icon and be larger enough for the user to click or tap the button.
.like-btn { position: relative; display: flex; justify-content: center; align-items: center; width: 80px; height: 80px; cursor: pointer; transition: all 0.5s; opacity: 0; z-index: 2; }
Next, we need to understand the initial state of our heart icon. I like to leverage whatever resources are available, so I chose font awesome and the fa fa-heart
icon to do the job. However you are free to create your own heart using CSS pseudo elements.
Our heart in unchecked state:
.fa-heart{ position: absolute; font-size: var(--like-font-size); -webkit-text-stroke: 2px #e5e5e5; color: whitesmoke; transition: all ease-in-out; }
And our Heart in the checked state:
.like-btn:checked + .fa-heart{ color: red; -webkit-text-stroke: 1px red; animation: .5s linear burst; }
Step 2 - Animate!
For this step it is basically freeform. You could definitely check out Twitter, TikTok, or Instagram for example of like buttons in the wild. I chose one that is simple yet playful enough for the user to take notice. Feel free to hack out one yourself!
@keyframes burst{ 0%,10%{ transform: scale(1); opacity: .5; color:lavender; } 45%{ transform: scale(.2) rotate(30deg); opacity: .75; } 50%{ transform: scale(2) rotate(-37.5deg); opacity: 1; color: red; text-shadow: 2px 2px 6px rgba(235, 9, 9, 0.5); } 90%,95%{ transform: scale(1) rotate(10deg); text-shadow: none; } 100% { transform: rotate(-2.5deg); } }
And just like that:
We have our very own hackable, reusable, css only "like" button. Thanks for reading, and feel free to check back for Just CSS components as I make them.
Original Link: https://dev.to/uzomezu/just-css-css-like-button-animation-2ll6
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To