<body id="social-section">
<h1>Hover social buttons</h1>
<h2>to change the body background-color</h2>
<div class="social-container">
<a href="#" class="twitter"><i class="fa fa-twitter"></i>Twitter</a>
<a href="#" class="facebook"><i class="fa fa-facebook"></i>Facebook</a>
<a href="#" class="googleplus"><i class="fa fa-google-plus"></i>Google +</a>
<a href="#" class="pinterest"><i class="fa fa-pinterest"></i>Pinterest</a>
<a href="#" class="dribbble"><i class="fa fa-dribbble"></i>Dribbble</a>
<a href="#" class="instagram"><i class="fa fa-instagram"></i>Instagram</a>
</div>
</body>
/* Demo Stuff */
*,:before,:after{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
h1, h2 {
text-align: center;
line-height: 20px
}
h1 {
color: rgba(0,0,0,.8);
}
h2 {
color: rgba(0,0,0,.2);
}
.social-container {
margin:0 auto;
padding: 40px 0;
width:200px;
height:100%;
}
/* Add this ID to a section or something you want to change the background-color */
#social-section {
padding:60px 0;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
/* Button Styles */
.social-container a {
display: block;
width:200px;
line-height: 40px;
border: 1px solid rgba(0,0,0,.1);
color: rgba(0,0,0,.6);
margin:20px 0;
text-decoration: none;
text-align:center;
}
.social-container a i {
margin-right: 15px;
}
.social-container a:hover {
border: 1px solid rgba(255,255,255,.3);
color: rgba(255,255,255,.6);
}
/* Hover background colors */
.color-twitter {
background-color: #00aced !important;
}
.color-facebook {
background-color: #3b5998 !important;
}
.color-pinterest {
background-color: #cc2127 !important;
}
.color-googleplus {
background-color: #dd4b39 !important;
}
.color-dribbble {
background-color: #ea4c89 !important;
}
.color-instagram {
background-color: #417399 !important;
}
.color-twitter,
.color-facebook,
.color-pinterest,
.color-googleplus,
.color-dribbble,
.color-instagram {
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in;
/*******************************
THERE IS A CSS ONLY APPROACH
By Christopher Grabinski (@chrisgrabinski)
You can find it here: https://codepen.io/chrisgrabinski/pen/dDbFt
********************************/
/*******************************
THERE IS A MUCH CLEANER JS-PEN
With it you can add social media icons without having to update your javascript
by Jesse Shawl (@jshawl)
You can find it here:
https://codepen.io/jshawl/pen/nHefA
********************************/
$(".twitter").hover(function () {
$("#social-section").toggleClass("color-twitter")
});
$(".facebook").hover(function () {
$("#social-section").toggleClass("color-facebook")
});
$(".googleplus").hover(function () {
$("#social-section").toggleClass("color-googleplus")
});
$(".pinterest").hover(function () {
$("#social-section").toggleClass("color-pinterest")
});
$(".dribbble").hover(function () {
$("#social-section").toggleClass("color-dribbble")
});
$(".instagram").hover(function () {
$("#social-section").toggleClass("color-instagram")
});
