DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Create Simple & Good Looking Buttons
howbotnik
howbotnik

Posted on

Create Simple & Good Looking Buttons

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

Buttons being activated

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:


Icons

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:

Icon buttons

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/

Top comments (2)

Collapse
 
mateiadrielrafael profile image
Matei Adriel

Not a single screenshot?

Collapse
 
howbotnik profile image
howbotnik Author

I know. I'll have a go but I'm new to all this.

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›