Social Buttons with Titles

Written by @kerixa 22 May 2020

Social sharing buttons are nowadays one important part of each content in the web. But maybe some people don't know their networks names exactly. Therefore, putting an informative bubble could clarify them. See below!

Code Snippet:

                                                <!-- this script is provided by coded by: Kerixa Inc. -->
<link rel="stylesheet" href="">
body {
  background: #e6e6e6;
  font-family: "Helvetica", "Arial";
  padding-top: 100px;
  text-align: center;

a {
  background: #D2D7D3;
  color: #222;
  border-radius: 100%;
  display: inline-block;
  text-decoration: none;
  position: relative;
  width: 40px;
  height: 28px;
  margin: 0 2px;
  padding-top: 12px;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;

a.icon:before {
  font-family: "FontAwesome", sans-serif;
  color: #fff;
  font-size: 20px;

a.facebook:before {
  content: '\f09a';

a.twitter:before {
  content: '\f099';

a.github:before {
  content: '\f113';

a.dribble:before {
  content: '\f17d';

a.pinterest:before {
  content: '\f0d2';

a span {
  background: #fff;
  color: #222;
  font-size: 14px;
  font-weight: bold;
  position:  absolute;
  bottom: 0;
  left: -25px;
  right: -25px;
  padding: 5px 7px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  transition: all .4s;

a span:before {
  content: '';
/*   width: 0;
  height: 0; */
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  position: absolute;
  bottom: -5px;
  left: 40px;

a:hover span {
  bottom: 50px;
  visibility: visible;
  opacity: 1;

/* Hover through the icons */

a.facebook:hover {
  background-color: #4183d7; 
  color: #bfbfbf;

a.facebook span {
  color: #4183d7;

a.twitter:hover {
  background-color: #19b5fe;
  color: #fff;

a.twitter span {
  color: #19b5fe;

a.github:hover {
  background-color: #000;
  color: #fff;

a.github span {
  color: #000;

a.dribble:hover {
  background-color: #f62459;
  color: #fff;

a.dribble span {
  color: #f62459;

a.pinterest:hover {
  background-color: #f22613;
  color: #fff;

a.pinterest span {
  color: #f22613;

<a href="" class="icon facebook"><span>Facebook</span></a>
<a href="" class="icon twitter"><span>Twitter</span></a>
<a href="" class="icon github"><span>Github</span></a>
<a href="" class="icon dribble"><span>Dribble</span></a>
<a href="" class="icon pinterest"><span>Pinterest</span></a>
</div><a target='_blank' href='' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>                                                


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!



Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

Online Users: 12
Recent Members: sahjahan, fk khan, Proper, Jenisha, Mr Joseph Charles
advertisement 2