we will create creative social media button styles by CSS3, HTML5 and fontawesome icon that will enhance your web design experience.

Now at this moment, social media is very popular platform. Every blogger want to display social media buttons in their site to promote their business. Our created social media buttons support all of the modern browsers. So you don't need to research anything.

http://www.codiblog.com/2016/02/css3-creative-social-media-button-styles.html

 

No need to use icon fonts now they are vastly inferior to SVG. I suggest you look into incorporating that and dropping fontAwesome.

 

The CSS in these buttons also isn't great, there's magic numbers all over the shot which makes things brittle and cannot really be reused. To style buttons you want an OOCSS structure like this.

.btn {
  display: inline-block;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  transition: background 0.2s;
}

.btn--sm {
  padding: 0.4rem 2rem;
}

.btn--md {
  padding: 0.6rem 3rem;
}

.btn--brand {
  background: $brand-color;
  &:hover,
  &:focus {
    darken($brand-color, 10%);
  }
}

.btn--alpha {
  background: $alpha-color;
  &:hover,
  &:focus {
    darken($alpha-color, 10%);
  }
}

.btn--full {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

$svg-size: 10px;

.btn--svg {
  position: relative;
  text-indent: ($svg-size + 5);
}

  .btn--svg__icon {
    position: absolute;
    top: 50%;
    left: 0;
    width: $svg-size;
    height: $svg-size;
    margin-top: -($svg-size / 2);
  }

This frees up many combinations that can be composed together using the styles provided above. Giving us 16 unique button styles. If we add in another modifier class say .btn--beta we will have 32 unique possibilities..

<a href="#" class="btn btn--md btn--brand>
  CTA
</a>

<a href="#" class="btn btn--md btn--alpha>
  CTA
</a>

<a href="#" class="btn btn--sm btn--brand>
  CTA
</a>

<a href="#" class="btn btn--sm btn--alpha>
  CTA
</a>

<a href="#" class="btn btn--md btn--full btn--brand>
CTA
</a>

<a href="#" class="btn btn--md btn--full btn--alpha>
CTA
</a>

<a href="#" class="btn btn--sm btn--full btn--brand>
CTA
</a>

<a href="#" class="btn btn--sm btn--full btn--alpha>
CTA
</a>

<a href="#" class="btn btn--md btn--brand btn--svg>
  <svg class="btn--svg__icon">
    ...
  </svg>
  CTA
</a>

<a href="#" class="btn btn--md btn--alpha btn--svg>
  <svg class="btn--svg__icon">
    ...
  </svg>
  CTA
</a>

<a href="#" class="btn btn--sm btn--brand btn--svg>
  <svg class="btn--svg__icon">
    ...
  </svg>
  CTA
</a>

<a href="#" class="btn btn--sm btn--alpha btn--svg>
  <svg class="btn--svg__icon">
    ...
  </svg>
  CTA
</a>


<a href="#" class="btn btn--md btn--full btn--brand btn--svg>
<svg class="btn--svg__icon">
...
</svg>
CTA
</a>

<a href="#" class="btn btn--md btn--full btn--alpha btn--svg>
<svg class="btn--svg__icon">
...
</svg>
CTA
</a>

<a href="#" class="btn btn--sm btn--full btn--brand btn--svg>
<svg class="btn--svg__icon">
...
</svg>
CTA
</a>

<a href="#" class="btn btn--sm btn--full btn--alpha btn--svg>
<svg class="btn--svg__icon">
...
</svg>
CTA
</a>

The number of combinations rises exponentially as you add in more chunks that can be composed. This is the essence of OOCSS and avoids the massive bloat you see on many websites. Always try to write classes that can be composed together. There's no reason at all that you cannot reuse your button classes to add in icons for social buttons.

 

Also don't use element selectors like .btn > span. Add a class to the span as again it is brittle and becomes markup dependent. Add a class to remove the dependancy.

Edited February 23, 201610 yr by rbrtsmith

• @privileged I have used simple code so that anybody can understand. We create code for beginner not for advanced. Our created code product also checked by themeforest.

Edited February 23, 201610 yr by rubel_designer