Css button effect – social icon
<div class="socialButton animated"> <a href="#" class="facebook"><i class="fa fa-facebook"></i></a> <a href="#" class="twitter"><i class="fa fa-twitter"></i></a> <a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a> <a href="#" class="github"><i class="fa fa-github"></i></a> <a href="#" class="email"><i class="fa fa-envelope"></i></a> </div>
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); .socialButton { margin-top: 0px; } .socialButton > a { position: relative; font-size: 20px; text-align: center; display: inline-block; color: white; z-index: 1; border-radius: 50%; background: rgba(0, 0, 0, 0.3); border: 0 none; line-height: 45px; margin: 10px; width: 45px; height: 45px; } .socialButton > a::before { content: ""; position: absolute; display: block; width: 100%; height: 100%; border: 0 none; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.5s all ease-in-out; -moz-transition: 0.5s all ease-in-out; -o-transition: 0.5s all ease-in-out; transition: 0.5s all ease-in-out; z-index: -1; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .socialButton > a:hover::before { background: #02c39a; border-radius: 0; border: 0; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg); transform: rotate(225deg); } .socialButton > a.facebook:hover::before { background: #3b5998; } .socialButton > a.twitter:hover::before { background: #1cadeb; } .socialButton > a.google-plus:hover::before { background: #d95232; } .socialButton > a.github:hover::before { background: #0d2636; } .socialButton > a.email:hover::before { background: #02c39a; }