How to make a button click effect in CSS

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

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.

Example

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.

Video

Was the article helpful?
👍
Yes - 14
👎
Not - 4
💬Comments:

CSS Головоломки в Telegram
Subscribe and don't miss:
Actual news
Interesting puzzles
Useful links
Our rating
🏆The best website hosting
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
How to make a burger menu – complete code and detailed explanation
Views: 18275
Appearance of elements on scrolling
Views: 16835
How to center an image with CSS
Views: 6946
How to make a smooth zoom of the image on hover – effect on pure CSS
Views: 6785
How to make a button click effect in CSS
Views: 6208
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;
}
    
10px
20px
30px
Very Peri
🤔Color of 2022
The Pantone Color Institute has announced the color of the year 2022. It's a shade of lilac lilac shade called 17-3938 Very Peri.
#6667ab