Button by mi-series
#e8e8e8
1button { 2 width: 150px; 3 height: 50px; 4 border: 2px solid #000; 5 font-family: 'Lato', sans-serif; 6 font-size: 17px; 7 text-decoration: none; 8 text-transform: uppercase; 9 letter-spacing: 2px; 10 font-weight: 500; 11 background: transparent; 12 cursor: pointer; 13 position: relative; 14 display: inline-block; 15 margin: 20px; 16 outline: none; 17 text-align: center; 18 z-index: 2; 19 transition: all 0.3s ease; 20 overflow: hidden; 21} 22 23button::after { 24 position: absolute; 25 content: " "; 26 z-index: -1; 27 top: 0; 28 left: 0; 29 width: 100%; 30 height: 100%; 31 transition: all 0.3s ease; 32} 33 34button:hover { 35 box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5), 36 -4px -4px 6px 0 rgba(116, 125, 136, .2), 37 inset -4px -4px 6px 0 rgba(255,255,255,.5), 38 inset 4px 4px 6px 0 rgba(116, 125, 136, .3); 39 color: #fff; 40} 41 42button:hover::after { 43 transform: scale(2) rotate(180deg); 44 background: #000; 45 box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5), 46 -4px -4px 6px 0 rgba(116, 125, 136, .2), 47 inset -4px -4px 6px 0 rgba(255,255,255,.5), 48 inset 4px 4px 6px 0 rgba(116, 125, 136, .3); 49}
691 views
691 views
MIT License