<section id="share"> <ul class="share"> <li class="share-twitter"><a href="#" target="_blank"><i class="fa fa-twitter"></i><span class="btn-text">Twitter</span></a></li> <li class="share-facebook"><a href="#" target="_blank"><i class="fa fa-facebook"></i><span class="btn-text">Facebook</span></a></li> <li class="share-google"><a href="#" target="_blank"><i class="fa fa-google-plus"></i><span class="btn-text">Google+</span></a></li> <li class="share-hatena"><a href="#" target="_blank"><i class="fa fa-hatena"></i><span class="btn-text">はてブ</span></a></li> <li class="share-pocket"><a href="#" target="_blank"><i class="fa fa-get-pocket"></i><span class="btn-text">Pocket</span></a></li> </ul> </section>
body { margin: 10px; border: 2px solid #225694; } #share { padding: 10px; } .share { overflow: hidden; height: 55px; } .share li { font-size: 14px; float: left; text-align: center; width: 19%; margin-right: 1%; border-radius: 3px; list-style: none; cursor: pointer; } .share a { display: block; height: 30px; padding-top: 10px; text-decoration: none; color: #fff; } .share i { margin-right: 7px; font-size: 1.5em; } .share .btn-text { position: relative; top: -3px; } .share .share-twitter { background-color: #55acee; box-shadow: 0 3px #2795e9; } .share .share-twitter:hover { background-color: #83c3f3; } .share .share-facebook { background-color: #3b5998; box-shadow: 0 3px #2d4373; } .share .share-facebook:hover { background-color: #4c70ba; } .share .share-google { background-color: #dd4b39; box-shadow: 0 3px #c23321; } .share .share-google:hover { background-color: #e47365; } .share .share-hatena { background-color: #2c6ebd; box-shadow: 0 3px #225694; } .share .share-hatena:hover { background-color: #4888d4; } .share .share-pocket { background-color: #ee4056; box-shadow: 0 3px #e6152f; } .share .share-pocket:hover { background-color: #f26f7f; } .fa-hatena:before { content: "B!"; font-family: "Verdana"; font-weight: bold; }