Building a Layered Button with CSS

Creating a unique, animated button using only CSS.

In this article I’ll walk you through how to create a layered button with animations using only CSS.

I recommend opening up a blank codepen to follow along, or you can jump straight into the completed codepen here.

HTML Button

Let’s start with a basic HTML button. Add the following to your HTML:

<button>click me!</button>

Nothing fancy, but it should look something like this:

Basic styling

Let’s add some basic styles to the button to get it looking a bit nicer.

For the sake of this tutorial, we’ll be targeting the button using the button selector, but you can also add a class to the button and target that class instead.

In your CSS, add the following:

button {
  /* add space between the text and edges of the button */
  padding: 1rem;
  /* update background color */
  background: #e2d9ca;
  /* increase text size */
  font-size: 2rem;
  /* update text color */
  color: #212b36;
  /* add a solid…