CSS Button Click Effect - Animation Idea #10

  • 1 February 2022
  • 0 replies

Userlevel 7
Badge +5

In this example - I decided to create a custom button that has the effect of being pressed.

It has the look of a momentary push button rather than a persistent one.

To do this we are simply changing the size and position by just a few pixels and adjusting the color and shadow.

CSS Button Press Effect

Here is how I did it.

/* Button Press Effect */
/* This is the CSS for the Branding and Look section */

#myBtn {
width: 75px;
height: 25px;
background-color: #e21836;
border-radius: 25px;
position: absolute;
box-shadow: 3px 3px grey;
left: 25px;
top: 25px;

#myBtn:active {
background-color: #9d061f;
left: 29px;
top: 29px;
width: 74px;
height: 24px;
box-shadow: none;

#myBtn:active p {
color: #ffffff;

Here is the HTML

<!-- This is the HTML for your widget or other page -->

<div id="myBtn">
<p style="padding-left:7px;">
Press Me</p>

<!-- Want to actually add a link to this button? -->
<!-- You can just add the following and change the URL as desired. -->

<div id="myBtn">
<p style="padding-left:7px;">
<a href="https://community.docebo.com" target="_blank" style="text-decoration:none;">Press Me</a></p>

Hopefully this is helpful for someone.

0 replies

Be the first to reply!