More Button with Animation with CSS only

More Button CSS / Boton más con opciones solo con CSS / Awesome More Button with Animation with CSS only

By Alex Coven

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="#"></a></span>
 <span class="btn"><a target="_blank" href="#"></a></span>
 <span class="close">
 <span></span>
 <span></span>
 </span>
 </label>
CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body{background:#2962FF;color:#fff;font-family:'Open Sans'}
a.branding img{width:30px;position:absolute;bottom:20px;right:20px;-webkit-filter:grayscale(100%)brightness(3);filter:grayscale(100%)brightness(3)}
.menu-open{display:none}
input,label{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(https://i.imgur.com/2pPxvki.png) center center/0 no-repeat #fff;margin:0 2px 0 auto;display:inline-block;width:10px;height:10px;border-radius:50%;transition:all 200ms ease-in-out}
input:checked+label .btn:nth-child(1):hover{background:url(https://i.imgur.com/POSj5xS.png) center center/50% no-repeat #fff}
.btn:nth-child(2){background:url(https://i.imgur.com/85JBoWr.png) center center/0 no-repeat #fff}
.btn:nth-child(3){background:url(https://i.imgur.com/6ukSRk7.png) center center/0 no-repeat #fff}
input:checked+label .btn:nth-child(2):hover{background:url(https://i.imgur.com/xAILxA4.png) center center/50% no-repeat #fff}
input:checked+label .btn:nth-child(3):hover{background:url(https://i.imgur.com/k4QroUT.png) center center/50% no-repeat #fff}
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;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:0;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:.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:0 0;bottom:0;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:.25}
50%{transform:translate(0,12px);opacity:.5}
100%{transform:translate(0,0);opacity:.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,.76342,0,0,0,0,1,0,0,0,0,1)}
4.166667%{transform:matrix3d(0.81071,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,.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,.98534,0,0,0,0,1,0,0,0,0,1)}
29.166667%{transform:matrix3d(1.02831,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,.97422,0,0,0,0,1,0,0,0,0,1)}
33.333333%{transform:matrix3d(1.01191,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,.98122,0,0,0,0,1,0,0,0,0,1)}
37.5%{transform:matrix3d(1,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,.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,.99884,0,0,0,0,1,0,0,0,0,1)}
62.5%{transform:matrix3d(1,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,.99795,0,0,0,0,1,0,0,0,0,1)}
66.666667%{transform:matrix3d(1.00095,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,.99851,0,0,0,0,1,0,0,0,0,1)}
70.833333%{transform:matrix3d(1.00119,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,.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,.99991,0,0,0,0,1,0,0,0,0,1)}
95.833333%{transform:matrix3d(0.99982,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,.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)}}
¿Te gusto el post?
¡Compártelo!

Adblock Detectado

Apoya este sitio desactivando el Adblock para seguir navegando. ¡Gracias!

¡Ya Desactive el Adblock!