Code a material raised button

Prologue

Hello everyone, today we are going to make a nice looking like button inspired from the Google material design guidelines. It will be a very quick tutorial in wich we will use only CSS.

Get the example code

You can find the code for this series in the pen below.

Setting up

Before starting, we need to import some essential assets that we will use: 2 Google fonts that are Pacifico and Lato, to make things look better. That's all we will need.

• Pacifico :

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

• Lato :

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />

Html Markup

Let's start by creating our html structure. We will only need a container to hold our button:

<div class="container">
  <h1 class="title">Raised Button</h1>
  <h3 class="subtitle">How to create a button that gives the impression do be raised on hover.
    <div class="button-wrapper">
      <button class="ninja-button">Hover me</button>
    </div>
</div>

The button wrapper element is only there to give the button some spacing. As you can see, we use a simple HTML <button></button> element, but you could also use a <a></a> element too. Let's now dive into the CSS, it's there where all the magic happens.

Adding the Styles

Let's start adding the styles. We will first quickly handle the demo and layout styles.

Demo Styles

First of all, we need to add the demo styles:

.container {
  max-width: 600px;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin: 0 auto;
  text-align: center;
  transform: translateY(-50%);
  .title {
    font-family: 'Pacifico';
    font-size: 3rem;
    margin: 10px 0;
  }
  .subtitle {
    font-family: 'Lato';
    color: $muted-grey;
    font-weight: 400;
  }
}

Nothig fancy there, just some basics to size and center a container. However, there is still a useful trick to learn from the code above. Look at the container styles, and notice it's position. It is set to absolute. We then use top: 50%; to vertically push the container to the center of the screen. The last thing to polish the effect is to add a transform: translateY(-50%); to exactly center the element.

Declaring Variables

We are going to need a few variables for our small project. Let's declare them :

$muted-grey: #999;
$purple: #8300ff;
$white: #fff;

$base-shadow: rgba(0, 0, 0, 0.12);
$purple-shadow-from: rgba(131, 0, 255, 0.42);
$purple-shadow-to: rgba(131, 0, 255, 0.2);
$purple-box-shadow: 0 14px 26px -12px $purple-shadow-from, 0 4px 23px 0px
    $base-shadow, 0 8px 10px -5px $purple-shadow-to;

First, we declare the 3 colors that we are going to need. The second part is where the things get interesting. We are going to use the CSS box-shadow property for our raised effect. If you don't know this CSS property, you can read this article to learn more about it.

What are we doing here ? we are first declaring a base shadow, that is basically just a shade of black color expressed in rgba format. RGBA adds the Alpha Channel (handles transparency) to the RGB format. Then we declare 2 variations of our purple color shadow, one being twice opaque than the other. Finally, we declare our main box shadow variable ($purple-box-shadow), that mixes the other box shadow variables that we created earlier. Now, we have everything we need to style and finish our button.

Styling the Button

We won't need much CSS to finish our button. Let's dive in :

.container {
  .button-wrapper {
    padding: 20px 0;
    .ninja-button {
      padding: 15px 50px;
      text-transform: uppercase;
      background: $purple;
      border: 2px solid $purple;
      color: $white;
      font-weight: 600;
      font-size: 0.75rem;
      border-radius: 50px;
      cursor: pointer;
      transition: all 0.4s;
      &:hover {
        opacity: 0.8;
        box-shadow: $purple-box-shadow;
      }
    }
  }
}

We won't talk about the .button-wrapper element since it is just here to give some additional spacing to our button.

We won't also talk much about the button's aesthetics and colors, because it is quite peronal and related to the kind of project you are working on. We mainly want to break down the raised effect to see what happens when you hover the button with your mouse. What is important there are the 3 following CSS properties :

• transition
• opacity
• box-shadow

The transition: all .3s; declaration tells the browser that the effect will last 0.3 seconds, for ALL transition types. Then we use the hover selector to play with the button opacity and box shadow. It's as simple as that, when we hover the button, the box shadow we previously defined gets added to it with some opacity, emphasizing the raised effect (giving the illusion that it gets closer to the light source).

Tada! We don't need to add anything, our button now works smoothly.

Epilogue

In this post, we saw how to create a simple CSS raised button using transitions and box shadows. If you want to share your thoughts or ask a question, give it a shot in the comments section. I hope you enjoyed this little session as much as i did writing it and to see you again soon on Css Ninja.