Button With Overflowing Icon

button with overflowing icon
Make buttons with overflowing icon.
GIF button with overflowing icon

Creating First Button

Link Font Awesome CSS. Add this code inside head :

We are using version 4.7.0 of Font Awesome. Version 5.0.0 and above not so compatible with this tutorial. But you can apply the idea used here with some little changes to make those higher versions compatible.
Write the following HTML :

Like link

Style it :

Learn about CSS variable here

like button

Set text stroke :

button with outline

Add a little glow :

button with outline and little shadow

Add on hover effect :

GIF button with on hover effect

You can change colors simply with one css variable :

GIF button with #3b5998

Create instagram button

like and Instagram buttons

Add margins :

like and Instagram buttons with margin

But it doesn’t give margin up and down as <a> is an inline element

vertically stacked buttons

We can make them inline-block but icon won’t be overflowing anymore :

button inline block

We can use div for margin :

vertically stacked buttons with margin

Create youtube button

like, Instagram and Youtube

You can align icon with vertical-align if it is not look good :

like, Instagram and Youtube

Simlilarly we can add other buttons (here I also added body{text-align: center}):

GIF button with overflowing icon

IE Compatibility

IE doesn’t support CSS variables, -webkit-text-stroke-color and -webkit-text-stroke-width. We have to add code specially for IE :

It will look like this in IE :
GIF button with overflowing icon on IE
Code is also available here: . Useful links :

Leave a Reply

Your email address will not be published. Required fields are marked *