CSS Button Click Effect - Animation Idea #10

  • 1 February 2022
  • 5 replies
  • 391 views

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


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

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

Hopefully this is helpful for someone.


5 replies

Badge

Hi, love this! Trying it out on our site but having difficulty changing the text and aligning it to the middle - any tips?  

 

Userlevel 7
Badge +5

@Kelly - Have you tried adding a line-height to the inline style on the following line of the HTML?

<p style="padding-left:7px;line-height: 150px">

You could start with a line-height value that matches the height of your box and tweak from there for desired look.

Badge

Great - and can you edit the text from the inline style? I would like it Bold and bigger font 

Userlevel 7
Badge +5

Sure - you could do something like this.

<p style="padding-left:7px;line-height:150px; font-size:18px;">

and for bolding - you can just put tags around the specific text you want bolded.

Go ahead and click <b>Here</b>

Badge

Thanks so much :) this looks fab!! 

 

Reply