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">
<head>
<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="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
</head>
<body>
<div class="animated_btn">
<button class="btn">Click me</button>
</div>
</body>
</html>
Pressed Effect On Button
Oldest comments (0)