Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 15, 2020 09:52 pm GMT

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>
Enter fullscreen mode Exit fullscreen mode

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;  }
Enter fullscreen mode Exit fullscreen mode

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;  }
Enter fullscreen mode Exit fullscreen mode

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;  }
Enter fullscreen mode Exit fullscreen mode

And our Heart in the checked state:

  .like-btn:checked + .fa-heart{      color: red;      -webkit-text-stroke: 1px red;      animation: .5s linear burst;   }
Enter fullscreen mode Exit fullscreen mode

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);    }  }
Enter fullscreen mode Exit fullscreen mode

And just like that:

Alt Text

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

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To