Use Google's Material Icons and CSS to Create Good Looking Buttons

Would you rather not read this article and go straight to the JSFiddle? Click here

Let's get started

Creating the button

We're going to start by creating a standard button in our html document.

Unfortunately, that means that it will come with it's own style and appear with sharp edges, grey colour and harsh borders. We want our button to be a bit more eye-catching than that so the first step is...

Remove the default style in CSS:

border: none;

outline: none;

Adding our own style:

I like my buttons to have a transparent background so that the text or icon contained within them stands out. Buttons also look cool with rounded off edges and a hover effect to highlight your interactions:

height: 35px;

width: 35px;

border-radius: 15px;

background-color: transparent;

color: white;

Also, adding a hover effect class:

.circle-button:hover {

background-color: yellow;

color: orange;

}

So, we now have a fully styled button that looks the business. Wouldn't it be great if there was a collection of icons that we could use to insert an appropriate image into our button instead of some boring text?

There is...

Adding Google's Material Icons

Google have kindly made their icons available to everybody through the use of their html header link. Here are just some of the icons available:

All you have to do is include it in your HTML document header like this:

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

Applying it to our button

All we have to do is include the icon inside our button in the HTML document like this:

<button class="circle-button centre-text">
        <i class="material-icons" style="font-size:25px;">cloud</i>
</button>

Which results in buttons like this:

The text we place inside the icon tag tells the Google API which icon we want. To explore Google's available icons click here.

Everything discussed in this article is available in the JSFiddle example code available here:

https://jsfiddle.net/howbotnik/287065rw/1/

Blog

Create Simple & Good Looking Buttons

howbotnik