DEV Community

Cover image for How to add a pressed effect on button click using css

Posted on • Updated on


How to add a pressed effect on button click using css

In this tutorial, we are going to learn how to add a pressed effect on a button using CSS. This effect is a part of modern UI design and is used on many websites. This effect allows the user to experience an interaction with the button element as compared to the normal behavior.

We’ll take advantage of the active pseudo class. This class is added to an HTML element automatically when it is clicked.

We can use CSS transform property to add a pressed effect on the button when it is active. CSS transform property allows us to scale, rotate, move and skew an element.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <title>Pressed effect on button</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link href="" rel="stylesheet">
    <div class="animated_btn">
      <button class="btn">Click me</button>

Enter fullscreen mode Exit fullscreen mode

For Video Tutorial

Full Source code

Pressed Effect On Button

Top comments (0)