#212121
1button { 2 font-size: 16px; 3 position: relative; 4 margin: auto; 5 padding: 1em 2.5em 1em 2.5em; 6 border: none; 7 background: #fff; 8 transition: all 0.1s linear; 9 box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.1); 10} 11 12button:active { 13 transform: scale(0.95); 14} 15 16button span { 17 color: #464646; 18} 19 20button .border { 21 position: absolute; 22 border: 0.15em solid #fff; 23 transition: all 0.3s 0.08s linear; 24 top: 50%; 25 left: 50%; 26 width: 9em; 27 height: 3em; 28 transform: translate(-50%, -50%); 29} 30 31button:hover .border { 32 display: block; 33 width: 9.9em; 34 height: 3.7em; 35} 36 37.full-rounded { 38 border-radius: 2em; 39}
Comments
Variations
1 MIT License