How to make a button click effect in CSS

🗓️ Updated: 16.08.2022
💬Comments: 0
👁️Views: 19443

Here you’ll learn how to make the button press-in effect in CSS. We’ll tell you ahead of time that there’s nothing complicated here, any beginner will be able to cope with it.


What we end up with (click the button):

What do we need to know? You must know what a pseudo-element is (:before and :after) and what pseudo-classes are (:hover, :active). You should understand how to add a shadow to an element and how you can move the element with the transform property.

Writing the code

So let’s get started.

Let’s create our button in HTML:

<button class="btn">Press on me</button>

Now, let’s move on to configuring the CSS. First, let’s rewrite the properties of button, which are set by default:

button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  font-size: inherit;
  font-family: inherit;

Now you can move on to the visual appearance of the button. Let’s set the text color, background, border, padding, and other little things.

button.btn {
  font-weight: 600;
  color: #382b22;
  text-transform: uppercase;
  padding: 1.25em 2em;
  background: #fff0f0;
  border: 2px solid #b18597;
  border-radius: 0.75em;
  transition: transform 0.15s;
  transform-style: preserve-3d;

So, we should get our button like this:

So far, nothing special. But let’s move on to pseudo-elements. Let’s add :before

button.btn::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f9c4d2;
  border-radius: inherit;
  box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;
  transform: translate3d(0, 0.75em, -1em);
  transition: transform 0.15s, box-shadow 0.15s;

And now we have a button with a 3D effect. We set the pseudo-element with background and shadow, which allowed us to achieve this effect. We also lowered it just below the main frame of the button. This is what we got:

Now let’s make a press-in effect when hovering over the button. It will be pressed in slightly, not entirely.

To do this, we lower the main frame below by changing its background a bit and slightly reducing the shadow (box-shadow) for the pseudo-element:

button.btn:hover {
  background: #ffe9e9;
  transform: translate(0, 0.25em);
button.btn:hover::before {
  box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;
  transform: translate3d(0, 0.5em, -1em);

A button like this comes out (hover over it!):

Press on me

And the final touch, let’s change the styles in condition :active

button.btn:active {
  background: #ffe9e9;
  transform: translate(0em, 0.75em);
button.btn:active::before {
  box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;
  transform: translate3d(0, 0, -1em);

When the button is active (the user has clicked it), we move the main part of the button slightly and remove the shadow.

That’s it, the button press-in effect is ready!

Final code

See the Pen How to make a button click effect in CSS by kirill (@kirivaha) on CodePen.


Was the article helpful?
Yes - 35
Not - 8

CSS Головоломки в Telegram
Subscribe and don't miss:
Actual news
Interesting puzzles
Useful links
Our rating
🏆The best website hosting
Что читают?
🏆Популярные записи
How to make a burger menu – complete code and detailed explanation
Views: 56401
How to make a smooth zoom of the image on hover – effect on pure CSS
Views: 42569
Appearance of elements on scrolling
Views: 41849
How to center an image with CSS
Views: 25881
How to make a button click effect in CSS
Views: 19443
Check of knowledge
🤔How well do you know CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
Viva Magenta
🤔Color of 2023
The Pantone Research Institute has chosen the color of the year for 2023. They became a carmine-red shade with a purple undertone, which was called Viva Magenta.