Make buttons with overflowing icon.
Creating First Button
Link Font Awesome CSS. Add this code inside head :
|
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 :
|
1 2 3 4 |
<a class="overflow-icon-btn like" href="#"> <i class="fa fa-thumbs-up fa-5x"></i> Like </a> |
Style it :
|
1 2 3 4 5 6 7 8 9 10 11 |
.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 :
|
1 2 3 4 |
.overflow-icon-btn i { -webkit-text-stroke-color: var(--bg-color, dodgerblue); -webkit-text-stroke-width: 0.02em; } |
Add a little glow :
|
1 2 3 4 5 |
.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 :
|
1 2 3 4 5 6 7 8 9 |
.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); } |
You can change colors simply with one css variable :
|
1 2 3 |
.overflow-icon-btn.like { --bg-color: #3b5998; } |
Create instagram button
|
1 2 3 4 |
<a class="overflow-icon-btn instagram" href="#"> <i class="fa fa-instagram fa-5x"></i> Instagram </a> |
|
1 2 3 |
.overflow-icon-btn.instagram { --bg-color: #cd486b; } |
Add margins :
|
1 2 3 4 |
.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 :
|
1 2 3 4 |
.overflow-icon-btn { /*..*/ display:inline-block; } |
We can use div for margin :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!--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> |
|
1 2 3 4 5 6 7 8 9 10 |
.overflow-icon-btn { /*..*/ /*margin: 8px; display: inline-block;*//*remove them*/ } div.margin-8-wrapper { margin: 8px; display: inline-block; } |
Create youtube button
|
1 2 3 4 5 6 |
<div class="margin-8-wrapper"> <a class="overflow-icon-btn youtube" href="#"> <i class="fa fa-youtube-play fa-5x"></i> Youtube </a> </div> |
|
1 2 3 |
.overflow-icon-btn.youtube { --bg-color: #cc181e; } |
You can align icon with vertical-align if it is not look good :
|
1 2 3 |
.overflow-icon-btn.youtube i { vertical-align: sub; } |
Simlilarly we can add other buttons (here I also added body{text-align: center}):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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> <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> |
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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@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 :
Code is also available here: . Useful links :
