logo DevAnswer - Developers Answer

Black and White Social Buttons

31st August

Preview


Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
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%;
}
</style>

</head>
<body>
<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>

</body>
</html>



Other Codes

Silver Stylish Share Buttons


Silver Stylish Share Buttons

Stylish shiny silver social sharing buttons
Cubic Social Media Buttons


Cubic Social Media Buttons

Cubic social share buttons with opening and closing effects.
Colorful Social Sharing Buttons


Colorful Social Sharing Buttons

Colorful social media sharing buttons with various hovering effects.
Social Buttons with Swip Effect


Social Buttons with Swip Effect

This code displays the social media buttons in such a way that there is a slider that moves to the right in the hover mode. Matin is displayed next to . . .