<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <br/><br/> <div class="col-md-12"> <a href="https://www.facebook.com/tunnelviewmusic/" target="_blank" class="btn-social btn-facebook"><i class="fa fa-facebook"></i></a> <a href="https://www.instagram.com/tunnelviewmusic/" target="_blank" class="btn-social btn-instagram"><i class="fa fa-instagram"></i></a> <a href="https://soundcloud.com/tunnelview" target="_blank" class="btn-social btn-soundcloud"><i class="fa fa-soundcloud"></i></a> <a href="https://twitter.com/tunnelviewmusic" target="_blank" class="btn-social btn-twitter"><i class="fa fa-twitter"></i></a> <a href="tunnelviewbooking@gmail.com" target="_blank" class="btn-social btn-email"><i class="fa fa-envelope"></i></a> </div> </div> </div>

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"); a.btn-social, .btn-social { border-radius: 50%; color: #ffffff !important; display: inline-block; height: 54px; line-height: 54px; margin: 8px 4px; text-align: center; text-decoration: none; transition: background-color .3s; webkit-transition: background-color .3s; width: 54px; } .btn-social .fa,.btn-social i { backface-visibility: hidden; moz-backface-visibility: hidden; ms-transform: scale(1); o-transform: scale(1); transform: scale(1); transition: all .25s; webkit-backface-visibility: hidden; webkit-transform: scale(1); webkit-transition: all .25s; } .btn-social:hover,.btn-social:focus { color: #fff; outline: none; text-decoration: none; } .btn-social:hover .fa,.btn-social:focus .fa,.btn-social:hover i,.btn-social:focus i { ms-transform: scale(1.3); o-transform: scale(1.3); transform: scale(1.3); webkit-transform: scale(1.3); } .btn-social.btn-xs { font-size: 9px; height: 24px; line-height: 13px; margin: 6px 2px; width: 24px; } .btn-social.btn-sm { font-size: 13px; height: 36px; line-height: 18px; margin: 6px 2px; width: 36px; } .btn-social.btn-lg { font-size: 22px; height: 72px; line-height: 40px; margin: 10px 6px; width: 72px; } .btn-behance { background-color: #1769ff; } .btn-behance:hover { background-color: #4a8aff; } .btn-bitbucket { background-color: #205081; } .btn-bitbucket:hover { background-color: #2a69aa; } .btn-codepen { background-color: #76daff; } .btn-codepen:hover { background-color: #a9e8ff; } .btn-deviantart { background-color: #4e6252; } .btn-deviantart:hover { background-color: #657e6a; } .btn-digg { background-color: #000; } .btn-digg:hover { background-color: #1a1a1a; } .btn-dribbble { background-color: #ea4c89; } .btn-dribbble:hover { background-color: #ef7aa7; } .btn-dropbox { background-color: #007ee5; } .btn-dropbox:hover { background-color: #1998ff; } .btn-facebook { background-color: #3b5998; } .btn-facebook:hover { background-color: #4c70ba; } .btn-flickr { background-color: #0063dc; } .btn-flickr:hover { background-color: #107cff; } .btn-foursquare { background-color: #ef4b78; } .btn-foursquare:hover { background-color: #f37a9b; } .btn-github { background-color: #4183c4; } .btn-github:hover { background-color: #689cd0; } .btn-google-plus { background-color: #dd4b39; } .btn-google-plus:hover { background-color: #e47365; } .btn-instagram { background-color: #3f729b; } .btn-instagram:hover { background-color: #548cb9; } .btn-jsfiddle { background-color: #4679bd; } .btn-jsfiddle:hover { background-color: #6c94ca; } .btn-lastfm { background-color: #e31b23; } .btn-lastfm:hover { background-color: #e9484e; } .btn-linkedin { background-color: #0976b4; } .btn-linkedin:hover { background-color: #0b96e5; } .btn-paypal { background-color: #253b80; } .btn-paypal:hover { background-color: #304da8; } .btn-pinterest { background-color: #cc2127; } .btn-pinterest:hover { background-color: #e04046; } .btn-reddit { background-color: #ff4500; } .btn-reddit:hover { background-color: #ff6a33; } .btn-skype { background-color: #00aff0; } .btn-skype:hover { background-color: #24c4ff; } .btn-soundcloud { background-color: #f80; } .btn-soundcloud:hover { background-color: #ffa033; } .btn-stack-overflow { background-color: #fe7a15; } .btn-stack-overflow:hover { background-color: #fe9748; } .btn-steam { background-color: #7da10e; } .btn-steam:hover { background-color: #a1d012; } .btn-stumbleupon { background-color: #eb4924; } .btn-stumbleupon:hover { background-color: #ef7053; } .btn-trello { background-color: #256a92; } .btn-trello:hover { background-color: #2f88bb; } .btn-tumblr { background-color: #35465c; } .btn-tumblr:hover { background-color: #485f7c; } .btn-twitch { background-color: #6441a5; } .btn-twitch:hover { background-color: #7e5bbe; } .btn-twitter { background-color: #55acee; } .btn-twitter:hover { background-color: #83c3f3; } .btn-vimeo { background-color: #1ab7ea; } .btn-vimeo:hover { background-color: #49c6ee; } .btn-vine { background-color: #00b488; } .btn-vine:hover { background-color: #00e7af; } .btn-vk { background-color: #45668e; } .btn-vk:hover { background-color: #587fae; } .btn-wechat { background-color: #98d11c; } .btn-wechat:hover { background-color: #afe53b; } .btn-wordpress { background-color: #21759b; } .btn-wordpress:hover { background-color: #2a95c5; } .btn-xing { background-color: #026466; } .btn-xing:hover { background-color: #039598; } .btn-yahoo { background-color: #400191; } .btn-yahoo:hover { background-color: #5601c4; } .btn-yelp { background-color: #af0606; } .btn-yelp:hover { background-color: #e00808; } .btn-youtube { background-color: #e52d27; } .btn-youtube:hover { background-color: #ea5955; } .btn-email { background-color: #44c456; } .btn-email:hover { background-color: #6bd079; }