Button by KSAplay
#e8e8e8
1.button { 2 position: relative; 3 display: flex; 4 align-items: center; 5 font-family: sans-serif; 6 font-weight: bold; 7 font-size: 1em; 8 padding: 0.5em 2em; 9 border-radius: 2em; 10 border: 0 solid #fefefe; 11 background-color: #ece5d8; 12 color: #3b4255; 13 box-shadow: 0 0 9px -4px #797979; 14 transition: 100ms; 15} 16 17.button::after { 18 position: absolute; 19 content: ''; 20 width: 100%; 21 height: 100%; 22 border-radius: 2em; 23 background-color: #ffdf99; 24 opacity: 0; 25 z-index: 1; 26 transition: 100ms; 27} 28 29.circle { 30 position: absolute; 31 display: flex; 32 align-items: center; 33 justify-content: center; 34 left: 0.4em; 35 height: 1.5em; 36 width: 1.5em; 37 border-radius: 1em; 38 background-color: #313131; 39} 40 41.circle::before { 42 position: absolute; 43 content: ''; 44 width: 32%; 45 height: 32%; 46 border-radius: 1em; 47 border: 3px solid #ffcd33; 48} 49 50.button span { 51 z-index: 2; 52 padding-left: 1.1em; 53} 54 55.button:hover { 56 border: 3px solid #fefefe; 57 box-shadow: 0 0 5px 0 #f0f0f0, inset 0 0 3px 0 #656565; 58} 59 60.button:active { 61 border: 0 solid #fefefe; 62 color: white; 63 box-shadow: inset 0 0 5px 0 #4b4b4b; 64 opacity: .7; 65} 66 67.button:active.button::after { 68 opacity: .5; 69}
1.1K views
1.1K views
MIT License