01.デザイン

02.流用元

■それからデザイン
https://sole-color-blog.com/blog/668/(https://sole-color-blog.com/blog/668/)
https://codepen.io/Mhmdhasan/pen/KdmOrY(https://codepen.io/Mhmdhasan/pen/KdmOrY)

03.基本的にコピペ...だが注意点

①boostlapのCDN記述が必要

test.html


<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>

最終的なソースは以下

test.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


    <head>
	    <!-- ①boostlapのCDN記述が必要 -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        
		<style>

			/* ここからCSSコピペ*/
			@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

			body
			{
			   background: #f5f5f5;
			   color: #fff;
			   font-family: 'Open Sans', sans-serif;
			   text-align: center
			}

			h1 
			{
			   color: #5C5959;
			   font-size: 30px;
			   padding-top: 40px;
			   font-weight: 400;;   
			}

			strong 
			{
			   text-transform: uppercase;
			   color: #373535
			}

			input
			{
			   display: none
			}

			div.share
			{
			   width: 60px;
			   height: 60px;
			   border-radius: 50%;
			   margin: 100px auto;
			   position: relative;
			}

			   label.click
			   {
				  width: 60px;
				  height: 60px;
				  border-radius: 50%;
				  text-align: center;
				  font-size: 20px;
				  line-height: 60px;
				  background: tomato;
				  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.4);
				  position: absolute;
				  top: 30px;
				  left: 10px;
				  z-index: 1;
				  cursor: pointer
			   }

			   a, a:hover
			   {
				  text-decoration: none;
				  color: #fff
			   }

			   ul
			   {
				  list-style: none;
				  margin: 20px 0 0 0;
				  padding: 0;
				  position: absolute;
				  top: -50px;
				  left: -50px;
				  width: 200px;
				  height: 200px;
			   }

			   ul li a
			   {
				  display: inline-block;
				  width: 60px;
				  height: 60px;
				  line-height: 60px;
				  border-radius: 50%;
				  text-align: center;
				  position: absolute;
				  top: 60px;
				  left: 60px;
				  background: lightblue;
				  transition: all .4s cubic-bezier(0.935, 0, 0.34, 1.33);
				  -webkit-transition: all .5s cubic-bezier(0.935, 0, 0.34, 1.33);
			   }

			ul li:nth-of-type(2) a {transition-delay: .1s}
			ul li:nth-of-type(3) a {transition-delay: .2s}
			ul li:nth-of-type(4) a {transition-delay: .3s}
			ul li:nth-of-type(5) a {transition-delay: .4s}
			ul li:nth-of-type(6) a {transition-delay: .5s}
			ul li:nth-of-type(7) a {transition-delay: .6s}
			ul li:nth-of-type(8) a {transition-delay: .7s}

			   #click:checked ~ ul li a
			   {
				  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.4);
			   }

			   #click:checked ~ ul li a.facebook
			   {
				  background: rgba(59,89,152,.8);
				  top: -10px;
				  left: -10px
			   }
			   #click:checked ~ ul li a.tumblr
			   {
				  background: rgba(53,70,92,.8);
				  transition-delay: .2s;
				  -webkit-transition-delay: .2s;
				  top: 60px;
				  left: -40px
			   }
   
			   #click:checked ~ ul li a.instagram
			   {
				  background: rgba(63,114,156,.8);
				  transition-delay: .3s;
				  -webkit-transition-delay: .3s;
				  top: 130px;
				  left: -10px
			   }
			   #click:checked ~ ul li a.youtube
			   {
				  background: rgba(205,32,31,.8);
				  transition-delay: .4s;
				  -webkit-transition-delay: .4s;
				  top: 160px;
				  left: 60px
			   }
			   #click:checked ~ ul li a.behance
			   {
				  background: rgba(23,105,255,.8);
				  transition-delay: .5s;
				  -webkit-transition-delay: .5s;
				  top: 130px;
				  left: 130px
			   }
			   #click:checked ~ ul li a.dribbble
			   {
				  background: rgba(235,76,137,.8);
				  transition-delay: .6s;
				  -webkit-transition-delay: .6s;
				  top: 60px;
				  left: 160px
			   }
   
			   #click:checked ~ ul li a.twitter
			   {
				  background: rgba(85,172,238,.8);
				  transition-delay: .7s;
				  -webkit-transition-delay: .7s;
				  top: -10px;
				  left: 130px
			   }
   
			   #click:checked ~ ul li a.google-plus
			   {
				  background: rgba(221,78,65,.8);
				  transition-delay: .8s;
				  -wenkit-transition-delay: .8s;
				  top: -40px;
				  left: 60px
			   }
			   /* CSSコピペ end*/
		</style>
	</head>

	<body>
		<!-- ここからhtmlコピペ -->
		<h1>Animated <strong>Share Button</strong> With Pure CSS</h1>

		<div class="share">
		   <input type="checkbox" id="click" name="share">
		   <label for="click" class="click"><i class="fa fa-bars"></i></label>

		   <ul>
			  <li><a href="#" class="facebook" title="facebook"><i class="fa fa-facebook"></i></a></li>
			  <li><a href="#" class="tumblr" title="tumblr"><i class="fa fa-tumblr"></i></a></li>
			  <li><a href="#" class="instagram" title="instagram"><i class="fa fa-instagram"></i></a></li>
			  <li><a href="#" class="youtube" title="youtube"><i class="fa fa-youtube"></i></a></li>
			  <li><a href="#" class="behance" title="behance"><i class="fa fa-behance"></i></a></li>
			  <li><a href="#" class="dribbble" title="dribbble"><i class="fa fa-dribbble"></i></a></li>
			  <li><a href="#" class="twitter" title="twitter"><i class="fa fa-twitter"></i></a></li>
			  <li><a href="#" class="google-plus" title="google plus"><i class="fa fa-google-plus"></i></a></li>
      
		   </ul>
		 <!-- htmlコピペ end-->
		</div>
    </body> 
</html>

②コピペで完了…かと思いきや何故かアイコンが中心からずれる(原因不明)

↓CSSにmarginを追加して暫定対応

test.html

   
   /* 中心のボタンのi要素 */
   label i{
	   margin-top:20px;
   }

   /* 周囲のボタンのi要素*/
   ul li i
   {
	   margin-top:22px;
   }

④完成

コピペのままのCSSだと配置が親要素の下部の真ん中(モンスターボールみたいな配置)になる
変えたければcssのpositionを変更することで対応可能

と、まぁ完全にメモでした
おーわり