Button by r7chardgh
#e8e8e8
1.button { 2 display: flex; 3 position: relative; 4 background: none; 5 border: 0; 6 transform-style: preserve-3d; 7 transform: rotateX(45deg)rotateZ(45deg); 8 cursor: pointer; 9} 10 11.button > .red { 12 position: absolute; 13 width: 1.5em; 14 height: 1.5em; 15 border-radius: 50%; 16 top: 50%; 17 left: 50%; 18 background-color: rgb(255, 49, 49); 19 transform: translate(-50%,-50%); 20 transform-style: preserve-3d; 21 display: flex; 22 justify-content: center; 23 align-items: center; 24} 25 26.red::before { 27 content: ""; 28 position: absolute; 29 width: 100%; 30 height: 1em; 31 left: 0; 32 background-color: rgb(255, 49, 49); 33 transform: rotateZ(-45deg) translateY(-.5em); 34 transition: height 150ms, transform 150ms; 35} 36 37.red::after { 38 content: ""; 39 position: absolute; 40 width: 100%; 41 height: 100%; 42 top: 0; 43 left: 0; 44 border-radius: 50%; 45 background-color: rgb(255, 49, 49); 46 transform: rotateZ(-45deg) translateY(-1em); 47 transition: transform 150ms; 48 border: 1px solid rgb(255, 196, 196); 49} 50 51.button > .base { 52 position: relative; 53 width: 3em; 54 height: 3em; 55 background-color: rgb(245, 216, 90); 56 transform-style: preserve-3d; 57 border-bottom: 1px solid rgb(255, 255, 255); 58 border-right: 1px solid rgb(255, 255, 255); 59} 60 61.base::before { 62 content: ""; 63 position: absolute; 64 width: 100%; 65 height: 100%; 66 top: 0; 67 left: 0; 68 background-color: rgb(245, 216, 90); 69 transform-origin: bottom; 70 transform: rotateX(90deg); 71 border-right: 1px solid #fff; 72} 73 74.base::after { 75 content: ""; 76 position: absolute; 77 width: 100%; 78 height: 100%; 79 top: 0; 80 left: 0; 81 background-color: rgb(245, 216, 90); 82 transform-origin: right; 83 transform: rotateY(-90deg); 84 border-left: 1px solid #fff; 85} 86 87.button:active>.red::before { 88 transform: rotateZ(-45deg) translateY(0); 89 height: 0; 90} 91 92.button:active>.red::after { 93 transform: rotateZ(-45deg) translateY(0); 94} 95 96
1.8K views
1.8K views
MIT License