Button With Overflowing Icon

zFunx CSS Tricks April 15, 2018 | 0

Make buttons with overflowing icon.

GIF

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">

1	<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>

</a>

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;
}

.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

Set text stroke :

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

.overflow-icon-btn i {

-webkit-text-stroke-color: var(--bg-color, dodgerblue);

-webkit-text-stroke-width: 0.02em;

}

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);
}

.overflow-icon-btn {

/*..*/

text-shadow: 0 0 8px var(--bg-color, dodgerblue);

box-shadow: 0 0 4px var(--bg-color, dodgerblue);

}

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);
}

.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);

}

GIF

You can change colors simply with one css variable :

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

.overflow-icon-btn.like {

--bg-color: #3b5998;

}

GIF

Create instagram button

<a class="overflow-icon-btn instagram" href="#">
	<i class="fa fa-instagram fa-5x"></i>
	Instagram
</a>

Instagram

</a>

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

.overflow-icon-btn.instagram {

--bg-color: #cd486b;

}

Add margins :

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

.overflow-icon-btn {

/*..*/

margin:8px;

}

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

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

.overflow-icon-btn {
	/*..*/
	display:inline-block;
}

.overflow-icon-btn {

/*..*/

display: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>

</a>

</div>

Instagram

</a>

</div>

.overflow-icon-btn {
	/*..*/
	/*margin: 8px;
	display: inline-block;*//*remove them*/
}

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

.overflow-icon-btn {

/*..*/

/*margin: 8px;

display: inline-block;*//*remove them*/

}

div.margin-8-wrapper {

margin: 8px;

display: inline-block;

}

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>

Youtube

</a>

</div>

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

.overflow-icon-btn.youtube {

--bg-color: #cc181e;

}

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

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

.overflow-icon-btn.youtube i {

vertical-align: sub;

}

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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

<!DOCTYPE html>

<head>

<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>

</a>

</div>

Instagram

</a>

</div>

Youtube

</a>

</div>

Twitter

</a>

</div>

</a>

</div>

</a>

</div>

Amazon

</a>

</div>

</a>

</div>

Heart

</a>

</div>

Buy me a cup of coffee

</a>

</div>

</body>

</html>

GIF

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;
	}
}

@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 :

GIF

Code is also available here: . Useful links :

Creating First Button

Create instagram button

Create youtube button

IE Compatibility

More from my site

Connect with me