add social media button on website or blog

Add Social Media Button on Website or Blog

The ability to engage with a larger audience and compete with other users is what makes social media popular.

Social media outlets can be used for marketing, community building, and other purposes that are focused on the community.

Also, social media allows a more dispersed community to influence one another through what they post or what other users choose to post.

Digital marketing is a marketing strategy that involves using the Internet, typically through social media sites, to engage users in order to reach their target market.

Social Media

Social media marketing also includes acquiring the target market through word of mouth marketing.

New organizations can often use a social media strategy as a way of engaging their audience, without the need to invest large amounts of money.

These organizations may not have the same amount of funds to hire professional marketers and so may look to digital marketing to help market their products and services.

Demo preview of the code:

Animated Social Media Button

Codes are here:

<link rel='stylesheet' href=''>
.social-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: -10px;
.social-buttons__button {
  margin: 10px 5px 0;

.social-button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
  width: 40px;
  height: 40px;
  text-decoration: none;
  border-radius: 100%;
  background: #fff;
  text-align: center;
.social-button::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  display: block;
  width: 0;
  height: 0;
  border-radius: 100%;
  transition: 0.3s;
.social-button:focus, .social-button:hover {
  color: #fff;
.social-button:focus::after, .social-button:hover::after {
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  margin-left: calc(-50% - 1px);
.social-button i,
.social-button svg {
  position: relative;
  z-index: 1;
  transition: 0.3s;
.social-button i {
  font-size: 18px;
.social-button svg {
  height: 40%;
  width: 40%;
.social-button--mail {
  color: #0072c6;
.social-button--mail::after {
  background: #0072c6;
.social-button--facebook {
  color: #3b5999;
.social-button--facebook::after {
  background: #3b5999;
.social-button--linkedin {
  color: #0077b5;
.social-button--linkedin::after {
  background: #0077b5;
.social-button--github {
  color: #6e5494;
.social-button--github::after {
  background: #6e5494;
.social-button--codepen {
  color: #212121;
.social-button--codepen::after {
  background: #212121;
.social-button--pinterest {
  color: #E60023;
.social-button--pinterest::after {
  background: #E60023;
.social-button--twitter {
  color: #55acee;
.social-button--twitter::after {
  background: #55acee;
.social-button--instagram {
  color: #e4405f;
.social-button--instagram::after {
  background: #e4405f;
.social-button--npmjs {
  color: #c12127;
.social-button--npmjs::after {
  background: #c12127;

<div class="social-buttons">
  <a href="#" class="social-buttons__button social-button social-button--facebook" aria-label="Facebook">
    <i class="fab fa-facebook-f"></i>
  <a href="#" class="social-buttons__button social-button social-button--twitter" aria-label="Twitter">
    <i class="fab fa-twitter"></i>
  <a href="#" class="social-buttons__button social-button social-button--instagram" aria-label="Instagram">
    <i class="fab fa-instagram"></i>
  <a href="#" class="social-buttons__button social-button social-button--linkedin" aria-label="Linkedin">
    <i class="fab fa-linkedin"></i>
  <a href="#" class="social-buttons__button social-button social-button--pinterest" aria-label="Pinterest">
    <i class="fab fa-pinterest"></i>

Importance of social media:

  • Social media can improve community development by allowing communities to band together to help one another.
  • This is most often done through social media campaigns where the community shares information and photos about issues and provides support to the victims of natural disasters.
  • Towards the end of the 20th century, a significant amount of work was done toward globalisation and becoming a member of the international community.
4.6/5 (9)

Similar Posts