Button With Overflowing Icon

button with overflowing icon
Make buttons with overflowing icon.

[WPGP gif_id=”805″ width=”600″]

Creating First Button

Link Font Awesome CSS. Add this code inside head :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
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 :
<a class="overflow-icon-btn like" href="#">
	<i class="fa fa-thumbs-up fa-5x"></i>
	Like
</a>

Like link

Style it :
.overflow-icon-btn {
	--bg-color: dodgerblue;/*css variable*/
	text-decoration: none;
	background-color: var(--bg-color, dodgerblue);
	padding: 12px 16px;
	color: #fff;
	border-radius: 4px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 16px;
}
Learn about CSS variable here

like button

Set text stroke :
.overflow-icon-btn i {
	-webkit-text-stroke-color: var(--bg-color, dodgerblue);
	-webkit-text-stroke-width: 0.02em;
}

button with outline

Add a little glow :
.overflow-icon-btn {
	/*..*/
	text-shadow: 0 0 8px var(--bg-color, dodgerblue);
	box-shadow: 0 0 4px var(--bg-color, dodgerblue);
}

button with outline and little shadow

Add on hover effect :
.overflow-icon-btn {
	/*..*/
	transition: .3s;
}

.overflow-icon-btn:hover {
	text-shadow: 0 0 24px var(--bg-color, dodgerblue);
	box-shadow: 0 0 12px var(--bg-color, dodgerblue);
}

[WPGP gif_id=”816″ width=”600″]

You can change colors simply with one css variable :
.overflow-icon-btn.like {
	--bg-color: #3b5998;
}

[WPGP gif_id=”818″ width=”600″]

Create instagram button

<a class="overflow-icon-btn instagram" href="#">
	<i class="fa fa-instagram fa-5x"></i>
	Instagram
</a>
.overflow-icon-btn.instagram {
	--bg-color: #cd486b;
}

like and Instagram buttons

Add margins :
.overflow-icon-btn {
	/*..*/
	margin:8px;
}

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 :
.overflow-icon-btn {
	/*..*/
	display:inline-block;
}

button inline block

We can use div for margin :
<!--wrap buttons with div-->
<div class="margin-8-wrapper">
	<a class="overflow-icon-btn like" href="#">
		<i class="fa fa-thumbs-up fa-5x"></i>
		Like
	</a>
</div>
<div class="margin-8-wrapper">
	<a class="overflow-icon-btn instagram" href="#">
		<i class="fa fa-instagram fa-5x"></i>
		Instagram
	</a>
</div>
.overflow-icon-btn {
	/*..*/
	/*margin: 8px;
	display: inline-block;*//*remove them*/
}

div.margin-8-wrapper {
	margin: 8px;
	display: inline-block;
}

vertically stacked buttons with margin

Create youtube button

<div class="margin-8-wrapper">
	<a class="overflow-icon-btn youtube" href="#">
		<i class="fa fa-youtube-play fa-5x"></i>
		Youtube
	</a>
</div>
.overflow-icon-btn.youtube {
	--bg-color: #cc181e;
}

like, Instagram and Youtube

You can align icon with vertical-align if it is not look good :
.overflow-icon-btn.youtube i {
	vertical-align: sub;
}

like, Instagram and Youtube

Simlilarly we can add other buttons (here I also added body{text-align: center}):
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
		body{text-align: center}
        .overflow-icon-btn {
            --bg-color: dodgerblue;
            text-decoration: none;
            background-color: var(--bg-color, dodgerblue);
            padding: 12px 16px;
            color: #fff;
            border-radius: 4px;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
            font-size: 16px;
            text-shadow: 0 0 8px var(--bg-color, dodgerblue);
            box-shadow: 0 0 4px var(--bg-color, dodgerblue);
            transition: .3s;
        }

        .overflow-icon-btn i {
            -webkit-text-stroke-color: var(--bg-color, dodgerblue);
            -webkit-text-stroke-width: 0.02em;
        }

        .overflow-icon-btn:hover {
            text-shadow: 0 0 24px var(--bg-color, dodgerblue);
            box-shadow: 0 0 12px var(--bg-color, dodgerblue);
        }

        div.margin-8-wrapper {
            margin: 8px;
            display: inline-block;
        }

        .overflow-icon-btn.like {
            --bg-color: #3b5998;
        }

        .overflow-icon-btn.instagram {
            --bg-color: #cd486b;
        }

        .overflow-icon-btn.youtube {
            --bg-color: #cc181e;
        }

        .overflow-icon-btn.youtube i {
            vertical-align: sub;
        }

        .overflow-icon-btn.twitter {
            --bg-color: #00aced;
        }

        .overflow-icon-btn.twitter i {
            vertical-align: sub;
        }

        .overflow-icon-btn.pinterest {
            --bg-color: #c92228;
        }

        .overflow-icon-btn.email {
            --bg-color: gray;
        }

        .overflow-icon-btn.email i {
            vertical-align: middle;
        }

        .overflow-icon-btn.amazon {
            --bg-color: #ff9900;
        }

        .overflow-icon-btn.amazon i {
            vertical-align: super;
        }

        .overflow-icon-btn.whatsapp {
            --bg-color: #25d366;
        }

        .overflow-icon-btn.heart {
            --bg-color: deepPink;
        }

        .overflow-icon-btn.paypal {
            --bg-color: #003087;
        }

        .overflow-icon-btn.paypal i {
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div class="margin-8-wrapper">
        <a class="overflow-icon-btn like" href="#">
            <i class="fa fa-thumbs-up fa-5x"></i>
            Like
        </a>
    </div>
    <div class="margin-8-wrapper">
        <a class="overflow-icon-btn instagram" href="#">
            <i class="fa fa-instagram fa-5x"></i>
            Instagram
        </a>
    </div>
    <div class="margin-8-wrapper">
        <a class="overflow-icon-btn youtube" href="#">
            <i class="fa fa-youtube-play fa-5x"></i>
            Youtube
        </a>
    </div>

    <div class="margin-8-wrapper">
        <a class="overflow-icon-btn twitter" href="#">
            <i class="fa fa-twitter fa-5x"></i>
            Twitter
        </a>
    </div>

    <div class="margin-8-wrapper">
        <a class="overflow-icon-btn pinterest" href="#">
            <i class="fa fa-pinterest fa-5x"></i>
            Pinterest
        </a>
    </div>

    <div class="margin-8-wrapper">
        <a class="overflow-icon-btn email" href="#">
            <i class="fa fa-envelope fa-5x"></i>
            Email
        </a>
    </div>

    <div class="margin-8-wrapper">
        <a class="overflow-icon-btn amazon" href="#">
            <i class="fa fa-amazon fa-5x"></i>
            Amazon
        </a>
    </div>

    <div class="margin-8-wrapper">
        <a class="overflow-icon-btn whatsapp" href="#">
            <i class="fa fa-whatsapp fa-5x"></i>
            WhatsApp
        </a>
    </div>

    <div class="margin-8-wrapper">
        <a class="overflow-icon-btn heart" href="#">
            <i class="fa fa-heart fa-5x"></i>
            Heart
        </a>
    </div>

    <div class="margin-8-wrapper">
        <a class="overflow-icon-btn paypal" href="#">
            <i class="fa fa-paypal fa-5x"></i>
            Buy me a cup of coffee
        </a>
    </div>
</body>

</html>

[WPGP gif_id=”805″ width=”600″]

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 :
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
	.overflow-icon-btn {
	background-color: dodgerblue;
	text-shadow: 0 0 8px dodgerblue;
	box-shadow: 0 0 4px dodgerblue;
	}

	.overflow-icon-btn:hover {
		text-shadow: 0 0 24px dodgerblue;
		box-shadow: 0 0 12px dodgerblue;
	}
}
It will look like this in IE :

[WPGP gif_id=”840″ width=”600″]

Code is also available here: . Useful links :

Leave a Reply

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