Pure CSS Click Effect Animation

Hello Coders! Welcome to CSS Animation Blog. In this, we're going to see how to create a beautiful click effect in CSS3. Basically, when you click on any icon, you can see a ripple effect happening. This shows user that you clicked something and gives users a better User Interface.

Here's a preview

That being said, let us get started.

Step - 1: Like always, create 2 files - index.html and style.css.

Step - 2: Copy the below HTML code and paste it into your code editor.

HTML


<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Pure CSS Click Effect</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css'>
  <link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="container">
  <div class="wrap">
    <div class="button" tabindex="1">
      <span class="ion-ionic"></span>
    </div>
    <div class="button" tabindex="2">
      <span class="ion-plus-circled"></span>
    </div>
    <div class="button" tabindex="3">
      <span class="ion-heart"></span>
    </div>
    <div class="button" tabindex="4">
      <span class="ion-power"></span>
    </div>
    <hr />
    <h3>CSS Click Effect</h3>
  </div>
</div>


</body>
</html>

Step - 3: Below is the CSS code for styling.

CSS


body {
    background: linear-gradient(315deg, #7f5a83, #0d324d);
    color: #fff;
    padding-top: 25%;
    text-align: center;
    height: 100vh;
}
.wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
h3 {
    font-family: 'Roboto Condensed';
    color: #fff;
    font-weight: 300;
}
.button {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin: 0 auto;
    width: 70px;
    height: 70px;
    font-size: 52px;
    transition: all 0.4s ease-in;
}
.button span[class^='ion'] {
    position: relative;
}

.button:before {
    content: '';
    background-color: #fff;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: scale(0.001, 0.001);
}
.button:focus {
    outline: 0;
    color: #fff;
}
.button:focus:before {
    animation: Click_Effect 0.8s ease-out;
}
@keyframes Click_Effect {
    50% {

        transform: scale(1.5, 1.5);
        opacity: 0;
    }
    99% {

        transform: scale(0.001, 0.001);
        opacity: 0;
    }
    100% {

        transform: scale(0.001, 0.001);
        opacity: 1;
    }
}

And that's it. You're done.

Let me know in the comments if you have any doubt related to this.

Follow @creocodigo for more projects and web related content.

If you find this useful, below are some other posts that I am sure you'll love