Material More Button CSS

index.html

<input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
  <label class="menu-open-button" for="menu-open">
    <span class="btn"><a href="#"></a></span>
    <span class="btn"><a target="_blank" href="http://www.dribbble.com/Alexcoven"></a></span>
    <span class="btn"><a target="_blank" href="http://www.instagram.com/alcoven"></a></span>
    <span class="close">
      <span></span>
      <span></span>
    </span>
  </label>

Material More Button CSS.markdown

Material More Button CSS

More Info button with material design style. Let me know if you've seen something like this. Used input:checked and a checkbox to build this, then used a tags to protect the click from unchecking the checkbox.

Forked from Alex Coven's Pen Material More Button CSS.

A Pen by Abdullah Ceylan on CodePen.

License.

style.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body {
  background: #2962FF;
  color:#fff;
  font-family: 'Open Sans';
}

.menu-open {
  display:none;
}

label, input {
  position:absolute;
  top:50%;
  left:50%;
  transition: all 200ms ease-in-out;
  cursor:pointer;
}

input:checked+label a {
  display:block;
  width:100%;
  height:100%;
}

.btn{
  background: url("http://i.imgur.com/2pPxvki.png") white no-repeat center center;
  background-size:0%;
  margin:0 auto;
  display:inline-block;
  width:10px;
  height:10px;
  margin-right:2px;
  border-radius:50%;
  transition: all 200ms ease-in-out;
}

input:checked+label .btn:nth-child(1):hover {
  background: url("http://i.imgur.com/POSj5xS.png") white no-repeat center center;
  background-size:50%;
}

.btn:nth-child(2) {
  background: url("http://i.imgur.com/85JBoWr.png") white no-repeat center center;
  background-size:0%;  
}

.btn:nth-child(3) {
  background: url("http://i.imgur.com/6ukSRk7.png") white no-repeat center center;
  background-size:0%; 
}

input:checked+label .btn:nth-child(2):hover {
  background: url("http://i.imgur.com/xAILxA4.png") white no-repeat center center;
  background-size:50%;
}

input:checked+label .btn:nth-child(3):hover {
  background: url("http://i.imgur.com/k4QroUT.png") white no-repeat center center;
  background-size:50%;
}

input:checked+label .btn {
  width:60px;
  height:60px;
  margin-top:50px;
  margin-right:17px;
  animation: bounce 1s linear 1;
}

input:not(:checked)+label .btn {
  animation: bounce 1s linear 1;
}

input:checked+label {
  margin-left:-85px;
}

.close {
  margin:0 auto;
  display:inline-block;
  width:10px;
  height:10px;
  background:transprent;
  transition: all 200ms ease-in-out;
  opacity:0;
  transition: opacity 0s ease-in-out;
}

.close > span {
  top:4px;
  left:9px;
  position:absolute;
  background:#fff;
  width:1px;
  height:2px;
  display:block;
  transform: rotate(-45deg);
  transition: all 200ms ease-in-out;
}

.close span:after {
  content:'';
  background:#FF6A8F;
  width:0px;
  position:absolute;
  height:2px;
}

.close:hover span:after {
  width:12.25px;
  transition: all 200ms ease-in-out;
}

.close:hover span {
  background:#FF6A8F;
  transition: all 200ms ease-in-out;
}

.close > span:first-child {
  transform: rotate(45deg);
}

input:checked+label .close > span {
  width:12px;
  margin-left:-13px;
  transition: all 200ms ease-in-out;
}

input:checked+label .close > span:first-child {
  transition-delay: 0.25s;
}

input:checked+label .close {
  position:absolute;
  top:50%;
  left:46%;
  margin-top:-50px;
  opacity:1;
  transition: all 400ms ease-in-out;
  width:20px;
  height:20px;
}

label span.btn:after{
  content:'';
  color:#fff;
  position:absolute;
  width:60px;
  background:transparent;
  bottom:0px;
  text-align:center;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:2px;
  opacity:0;
  transition: all 200ms ease-in-out;
}

input:checked+label span.btn:hover:after{
  opacity:1;
  bottom:-20px;
  transition: all 400ms ease-in-out;
}


input:checked+label span.btn:hover:nth-child(1):after{
  content:'email';
}

input:checked+label span.btn:hover:nth-child(2):after{
  content:'dribbble';
}

input:checked+label span.btn:hover:nth-child(3):after{
  content:'like';
}


input:checked+label span.btn:nth-child(1),input:checked+label span.btn:nth-child(2),input:checked+label span.btn:nth-child(3){
  background-size:50%;
}

input:checked+label span.btn:hover:nth-child(1),input:checked+label span.btn:hover:nth-child(2),input:checked+label span.btn:hover:nth-child(3){
  transition: all 300ms ease-in-out;
  transform:scale(1.1);
}

input:not(:checked)+label:hover span.btn:nth-child(1) {animation: loadingC .6s .1s linear infinite;}
input:not(:checked)+label:hover span.btn:nth-child(2) {animation: loadingC .6s .2s linear infinite;}
input:not(:checked)+label:hover span.btn:nth-child(3) {animation: loadingC .6s .3s linear infinite;}

@keyframes loadingC {
    0 {transform: translate(0,0);opacity:0.25;}
    50% {transform: translate(0,12px);opacity:0.5;}
    100% {transform: translate(0,0);opacity:0.75;}
}

@keyframes bounce {
    0% { 
        transform: matrix3d(.7, 0, 0, 0, 0, .7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    2.083333% {
        transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    4.166667% {
        transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    6.25% {
        transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    8.333333% {
        transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    10.416667% {
        transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    12.5% {
        transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    14.583333% {
        transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    16.666667% {
        transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    18.75% {
        transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    20.833333% {
        transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    22.916667% {
        transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    25% {
        transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    27.083333% {
        transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    29.166667% {
        transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    31.25% {
        transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    33.333333% {
        transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    35.416667% {
        transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    37.5% {
        transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    39.583333% {
        transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    41.666667% {
        transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    43.75% {
        transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    45.833333% {
        transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    47.916667% {
        transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    50% {
        transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    52.083333% {
        transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    54.166667% {
        transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    56.25% {
        transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    58.333333% {
        transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    60.416667% {
        transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    62.5% {
        transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    64.583333% {
        transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    66.666667% {
        transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    68.75% {
        transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    70.833333% {
        transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    72.916667% {
        transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    75% {
        transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    77.083333% {
        transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    79.166667% {
        transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    81.25% {
        transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    83.333333% {
        transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    85.416667% {
        transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    87.5% {
        transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    89.583333% {
        transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    91.666667% {
        transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    93.75% {
        transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    95.833333% {
        transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    97.916667% {
        transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    100% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
}