Are you bored of common colorful social sharing buttons? Why not to use black and white ones? The following code provides various example of such social media buttons with different effects. They are simple and useful. Enjoy!


HTML
<!-- This script got from www.devanswer.com -->
<div class="container">
<h1>CSS3 Social Buttons</h1>
<div class="effect lavinia">
<div class="buttons">
<a  href="https://www.facebook.com/sharer.php?u=http://devanswer.com" class="fb" title="On Facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a  href="https://twitter.com/intent/tweet?text=DevAnswer&url=http://devanswer.com" class="tw" title="On Twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a  href="https://vk.com/share.php?url=http://devanswer.com" class="vk" title="On VK.com"><i class="fa fa-vk" aria-hidden="true"></i></a>
<a  href="https://www.pinterest.com/pin/create/button/?url=http://devanswer.com" class="pinterest" title="Pin It"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
<a  href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http://devanswer.com" class="in" title="On LinkedIn"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</div>
</div>
<div class="effect varrius">
<div class="buttons">
<a  href="https://www.facebook.com/sharer.php?u=http://devanswer.com" class="fb" title="On Facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a  href="https://twitter.com/intent/tweet?text=DevAnswer&url=http://devanswer.com" class="tw" title="On Twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a  href="https://vk.com/share.php?url=http://devanswer.com" class="vk" title="On VK.com"><i class="fa fa-vk" aria-hidden="true"></i></a>
<a  href="https://www.pinterest.com/pin/create/button/?url=http://devanswer.com" class="pinterest" title="Pin It"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
<a  href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http://devanswer.com" class="in" title="On LinkedIn"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</div>
</div>
<div class="effect thurio">
<div class="buttons">
<a  href="https://www.facebook.com/sharer.php?u=http://devanswer.com" class="fb" title="On Facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a  href="https://twitter.com/intent/tweet?text=DevAnswer&url=http://devanswer.com" class="tw" title="On Twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a  href="https://vk.com/share.php?url=http://devanswer.com" class="vk" title="On VK.com"><i class="fa fa-vk" aria-hidden="true"></i></a>
<a  href="https://www.pinterest.com/pin/create/button/?url=http://devanswer.com" class="pinterest" title="Pin It"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
<a  href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http://devanswer.com" class="in" title="On LinkedIn"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</div>
</div>
<div class="effect amiens">
<div class="buttons">
<a  href="https://www.facebook.com/sharer.php?u=http://devanswer.com" class="fb" title="On Facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a  href="https://twitter.com/intent/tweet?text=DevAnswer&url=http://devanswer.com" class="tw" title="On Twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a  href="https://vk.com/share.php?url=http://devanswer.com" class="vk" title="On VK.com"><i class="fa fa-vk" aria-hidden="true"></i></a>
<a  href="https://www.pinterest.com/pin/create/button/?url=http://devanswer.com" class="pinterest" title="Pin It"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a>

<a  href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http://devanswer.com" class="in" title="On LinkedIn"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</div>
</div>
<div class="effect solanio">
<div class="buttons">
<a  href="https://www.facebook.com/sharer.php?u=http://devanswer.com" class="fb" title="On Facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a  href="https://twitter.com/intent/tweet?text=DevAnswer&url=http://devanswer.com" class="tw" title="On Twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a  href="https://vk.com/share.php?url=http://devanswer.com" class="vk" title="On VK.com"><i class="fa fa-vk" aria-hidden="true"></i></a>
<a  href="https://www.pinterest.com/pin/create/button/?url=http://devanswer.com" class="pinterest" title="Pin It"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
<a  href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http://devanswer.com" class="in" title="On LinkedIn"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</div>
</div>
</div>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400i" rel="stylesheet">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
                        

CSS
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
    /* common styles !!! YOU DON'T NEED THEM */
.container {
  margin: 60px auto 0px auto;
  text-align: center;
}
.container h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: 30px;
  text-transform: uppercase;
  color: #212121;
  letter-spacing: 3px;
}
.container h1 span {
  display: inline-block;
}
.container h1 span:before, .container h1 span:after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background-color: #212121;
  margin: 0px 0px 0px 2px;
}

.effect {
  width: 100%;
  padding: 50px 0px 70px 0px;
  background-color: #212121;
}
.effect h2 {
  color: #fff;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 25px;
  letter-spacing: 3px;
}
.effect:nth-child(2) {
  margin-top: 50px;
}
.effect:nth-child(2n+1) {
  background-color: #fff;
}
.effect:nth-child(2n+1) h2 {
  color: #212121;
}
.effect:nth-child(2n) a {
  color: #fff;
  border-color: #fff;
}
.effect .buttons {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}

/* styles for a common effect !!!YOU NEED THEM */
.effect {
  /*display: flex; !!!uncomment this line !!!*/
}
.effect a {
  text-decoration: none !important;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 20px;
  font-size: 25px;
  overflow: hidden;
  position: relative;
  color: #212121;
  border: 2px solid #212121;
}
.effect a i {
  position: relative;
  z-index: 3;
}
.effect a:last-child {
  margin-right: 0px;
}
.effect a:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.effect a i {
  display: inline-block;
  vertical-align: middle;
}

/* lavinia effect */
.effect.lavinia a {
  transition: border-top-color 0.2s linear 0s, border-right-color 0.2s linear 0.1s, border-bottom-color 0.2s linear 0.2s, border-left-color 0.2s linear 0.3s;
  overflow: visible;
}
.effect.lavinia a:hover {
  border-color: rgba(255, 255, 255, 0);
}
.effect.lavinia a:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: -2px;
  left: -2px;
  border: 2px dashed #fff;
  position: absolute;
  border-radius: 50%;
}

/* varrius effect */
.effect.varrius a {
  transition: all 0.2s linear 0s;
}
.effect.varrius a:after {
  content: "";
  display: block;
  width: 90%;
  height: 90%;
  top: -110%;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  background-color: #212121;
  border-radius: 50%;
}
.effect.varrius a:hover {
  color: #fff;
}
.effect.varrius a:hover:after {
  top: 5%;
  transition: all 0.2s linear 0s;
}

/* thurio effect */
.effect.thurio a {
  transition: border-radius 0.2s linear 0s;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.effect.thurio a i {
  transition: -webkit-transform 0.01s linear 0s;
  transition: transform 0.01s linear 0s;
  transition: transform 0.01s linear 0s, -webkit-transform 0.01s linear 0s;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.effect.thurio a:hover {
  border-radius: 0px;
}

/* amiens effect */
.effect.amiens a {
  transition: all 0.2s linear 0.2s;
}
.effect.amiens a i {
  transition: all 0.2s linear 0s;
}
.effect.amiens a:hover {
  transition: all 0.2s linear 0s;
  border-color: rgba(33, 33, 33, 0);
}
.effect.amiens a:hover i {
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
  text-shadow: 4px 0px 3px rgba(33, 33, 33, 0.3);
  transition: all 0.2s linear 0.2s;
}

/* solanio effect */
.effect.solanio a {
  border: none;
  overflow: visible;
}
.effect.solanio a:after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  left: -2px;
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  border-radius: 50%;
  transition: all 0.2s linear 0s;
}
.effect.solanio a:hover:after {
  height: 0px;
  top: 100%;
}