Would you rather not read this article and go straight to the JSFiddle? Click here
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...
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:
Also, adding a hover effect class:
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?
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>
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: