CODEWITHSUNDEEP
javascripthtml
Circus Boulevard
Circus Boulevard

Reputation: 3

Make Social Icons Clickable

I've been searching online for some instructions how to make social icons clickable but I can't seem to find the answer. I like to put in my blog some icons with codes like these:

 .social-wrap {
          width: 325px;
          height: 50px;
          position: absolute;
          top: 50%;
          left: 50%;
          margin: -25px 0 0 -162.5px;
        }
        .social-wrap button {
          border: none;
          outline: none;
          width: 50px;
          height: 50px;
          font-size: 1.25em;
          transition: color .25s ease-out, background .25s ease-out, border-radius .25s ease-out;
          box-shadow: 0px 27px 73px -10px rgba(0, 0, 0, 0.75);
        }
        .social-wrap button:hover {
          cursor: pointer;
          border-radius: 50px;
          box-shadow: 0px 27px 45px -10px rgba(0, 0, 0, 0.75);
        }
        .social-wrap .facebook {
          color: #3b5998;
          background-color: #fff;
        }
        .social-wrap .facebook:hover {
          color: #fff;
          background-color: #3b5998;
        }
        .social-wrap .facebook:active {
          background-color: #fff;
          color: #3b5998;
        }
        .social-wrap .twitter {
          color: #00aced;
          background-color: #fff;
        }
        .social-wrap .twitter:hover {
          color: #fff;
          background-color: #00aced;
        }
        .social-wrap .twitter:active {
          background-color: #fff;
          color: #00aced;
        }
        .social-wrap .google-plus {
          color: #dd4b39;
          background-color: #fff;
        }
        .social-wrap .google-plus:hover {
          color: #fff;
          background-color: #dd4b39;
        }
        .social-wrap .google-plus:active {
          background-color: #fff;
          color: #dd4b39;
        }
  <div class='social-wrap'>
    <button class='facebook'>
      <i class='fa fa-facebook'></i>
    </button>
    <button class='twitter'>
      <i class='fa fa-twitter'></i>
    </button>
    <button class='google-plus'>
      <i class='fa fa-google-plus'></i>
    </button>
 </div>
How can I make it clickable? I tried inserting button tags but it gives me some error " Illegal nesting: nesting within plain text is illegal.". Please give me some idea how to do it. TIA

Upvotes: 0

Views: 462

Answers (3)

Ashu
Ashu

Reputation: 2266

One easy fix is to surround the button by anchor tag <a> and add the href attribute of it.

.social-wrap {
  width: 325px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -162.5px;
}

.social-wrap button {
  border: none;
  outline: none;
  width: 50px;
  height: 50px;
  font-size: 1.25em;
  transition: color .25s ease-out, background .25s ease-out, border-radius .25s ease-out;
  box-shadow: 0px 27px 73px -10px rgba(0, 0, 0, 0.75);
}

.social-wrap button:hover {
  cursor: pointer;
  border-radius: 50px;
  box-shadow: 0px 27px 45px -10px rgba(0, 0, 0, 0.75);
}

.social-wrap .facebook {
  color: #3b5998;
  background-color: #fff;
}

.social-wrap .facebook:hover {
  color: #fff;
  background-color: #3b5998;
}

.social-wrap .facebook:active {
  background-color: #fff;
  color: #3b5998;
}

.social-wrap .twitter {
  color: #00aced;
  background-color: #fff;
}

.social-wrap .twitter:hover {
  color: #fff;
  background-color: #00aced;
}

.social-wrap .twitter:active {
  background-color: #fff;
  color: #00aced;
}

.social-wrap .google-plus {
  color: #dd4b39;
  background-color: #fff;
}

.social-wrap .google-plus:hover {
  color: #fff;
  background-color: #dd4b39;
}

.social-wrap .google-plus:active {
  background-color: #fff;
  color: #dd4b39;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='social-wrap'>
   <a href="http://www.facebook.com"><button class='facebook'>
      <i class='fa fa-facebook'></i>
   </button></a>
   <a href="http://www.twitter.com"><button class='twitter'>
      <i class='fa fa-twitter'></i>
    </button></a>
   <a href="http://www.google.com"><button class='google-plus'>
      <i class='fa fa-google-plus'></i>
    </button></a>
</div>

Upvotes: 1

pfcodes
pfcodes

Reputation: 1086

Enclose them in anchor tags instead of button tags, and then style the anchor tags to look like buttons.

<a class="facebook button" href="https://facebook.com/">
  <i class='fa fa-facebook'></i>
</a>

In the stylesheet change

.social-wrap button to .social-wrap .button

and

.social-wrap button:hover to .social-wrap .button:hover

(periods before the 'b' in 'button')

Upvotes: 0

Alex Charters
Alex Charters

Reputation: 301

You should be able to just wrap the <i> tags in <a> tags with the href attribute set to the appropriate link:

<a href="your-link-here">
    <i class='fa fa-facebook'></i>
</a>

you can even wrap the buttons in the <a> tags if need them to be clickable as well.

Upvotes: 1

Related Questions