44 views
CSSAdd prefixes
1.btn { 2 padding: 10px 20px; 3 font-size: 18px; 4 background: rgb(240, 240, 240); 5 border: 1px solid transparent; 6 border-radius: 5px; 7 cursor: pointer; 8 transition: all .3s; 9 position: relative; 10 display: flex; 11 align-items: center; 12 justify-content: center; 13 overflow: hidden; 14 color: rgb(49, 48, 48); 15} 16 17.btn::before { 18 border-radius: 50%; 19 background-color: rgb(0, 98, 255, 0.2); 20 content: ''; 21 position: absolute; 22 width: 0; 23 height: 0; 24} 25 26.btn:hover { 27 border-color: rgb(0, 98, 255); 28 color: rgb(0, 98, 255); 29} 30 31.btn:focus { 32 color: rgb(0, 98, 255); 33 border-color: rgb(0, 98, 255); 34 box-shadow: 0 0 0 3px rgb(0, 98, 255, 0.2); 35} 36 37.btn:focus::before { 38 transition: all 0.5s ease-out; 39 opacity: 0; 40 width: 250px; 41 height: 250px; 42}
HTML
1<button class="btn"> 2 Material Button 3</button>