8.4K views
CSSAdd prefixes
1.btn { 2 position: relative; 3 font-size: 17px; 4 text-transform: uppercase; 5 text-decoration: none; 6 padding: 1em 2.5em; 7 display: inline-block; 8 border-radius: 6em; 9 transition: all .2s; 10 border: none; 11 font-family: inherit; 12 font-weight: 500; 13 color: black; 14 background-color: white; 15} 16 17.btn:hover { 18 transform: translateY(-3px); 19 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 20} 21 22.btn:active { 23 transform: translateY(-1px); 24 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 25} 26 27.btn::after { 28 content: ""; 29 display: inline-block; 30 height: 100%; 31 width: 100%; 32 border-radius: 100px; 33 position: absolute; 34 top: 0; 35 left: 0; 36 z-index: -1; 37 transition: all .4s; 38} 39 40.btn::after { 41 background-color: #fff; 42} 43 44.btn:hover::after { 45 transform: scaleX(1.4) scaleY(1.6); 46 opacity: 0; 47}
HTML
1<button class="btn"> Button 2</button>