Hello! Welcome back to Coding With Madeleine! Today I am going to show you how to make a fun button with an animated shadow. This button is super easy to make and it requires only CSS and no JavaScript! The shadow of the button makes it pop out of the page and when you click on it, the shadow gets smaller, just like clicking a real button.
You can’t click on the button below. That’s just an image.
Before we get started, take a look at the button here.
the html
The HTML is pretty simple. You can use virtually any text tag (like <a>, <p>, or <h1>) but I (ironically) do not recommend using a <button>.
<a href="#">click on me</a>(Since I have no specific link right now, I just set it to “#”.)
styling the button
Before, we add the animations, let’s just style what the button would look like normally. I reccommend following my CSS for the “Looks of the Button” part, but for the “Looks of the Text,” you can change anything there.
First, I set the font size to 70px and font to DM Sans. I had to link that font from Google Fonts, so you can change this to Arial or something like that. I also set the text-decoration to none, which removes the underline. Then, I set the color of the text to black.
a{
/*LOOKS OF THE TEXT*/
font-size: 70px;
font-family: DM Sans;
text-decoration: none;
color: black;
/*LOOKS OF THE BUTTON*/
padding: 10px 10px;
border-style: solid;
border-color: black;
box-shadow: 30px 30px 0px 0px black;
display: inline-block;
}For the button, I made the border solid and black. After, I added some padding so that the border wouldn’t be too close to the text. Then, I added the box shadow to 30px 30px 0px 0px black. Play around with the box shadow sizes to fit your liking. (The third number will make the box shadow blurry.)
Lastly, I set the display to inline block because it fixes some weird things that the CSS might do.
adding the animation
Now, your button probably looks pretty good, but it doesn’t yet have the piece de resistance: the animation! Surprisingly, making animations in CSS is super easy, and only requires a single line a code. (I bolded it so you can see what it is.)
a{
/*LOOKS OF THE TEXT*/
font-size: 70px;
font-family: DM Sans;
text-decoration: none;
color: black;
/*LOOKS OF THE BUTTON*/
padding: 10px 10px;
border-style: solid;
border-color: black;
box-shadow: 30px 30px 0px 0px black;
display: inline-block;
/*THE ANIMATION*/
transition: box-shadow 0.1s linear;
}Transitions are super simple: the first word is what the animation is applying to. In our case, we want the box shadow to change, so I wrote box shadow. The second part is the duration of the animation, and the third is how the animation timing function. Learn more about that here. You can also add a delay (by adding x number of seconds after the animation timing function), but I find them rather annoying.
Then, we need to add the CSS that will determine what the button should look like during the animation. I simply made the shadow just get smaller.
a:active{
box-shadow: 10px 10px 0px 0px black;
}Notice that instead of just “a” it says “a:active.” Active means that the box shadow will get smaller when it it clicked on. You can set “active” to “hover” if you want the box shadow to get smaller when the mouse is hovering over it.
And now you’re done! Here is all the code together:
<style>
/*A FONT; NO NEED TO CARE ABOUT THIS :)*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans&display=swap');
a{
/*LOOKS OF THE TEXT*/
font-size: 70px;
font-family: DM Sans;
text-decoration: none;
color: black;
/*LOOKS OF THE BUTTON*/
padding: 10px 10px;
border-style: solid;
border-color: black;
box-shadow: 30px 30px 0px 0px black;
display: inline-block;
/*THE ANIMATION*/
transition: box-shadow 0.1s linear;
}
a:active{
box-shadow: 10px 10px 0px 0px black;
}
</style>
<a href="#">click on me</a>I hope you enjoyed this tutorial! If you have any questions let me know! Also, if you have any suggestions for future coding tutorials, leave them in the comments. I hope you have a nice rest of your day. Bye!
Whimsical Watercolor 