#e8e8e8
1button { 2 background: transparent; 3 position: relative; 4 padding: 5px 15px; 5 display: flex; 6 align-items: center; 7 font-size: 17px; 8 font-weight: 600; 9 text-decoration: none; 10 cursor: pointer; 11 border: 1px solid rgb(40, 144, 241); 12 border-radius: 25px; 13 outline: none; 14 overflow: hidden; 15 color: rgb(40, 144, 241); 16 transition: color 0.3s 0.1s ease-out; 17 text-align: center; 18} 19 20button span { 21 margin: 10px; 22} 23 24button::before { 25 position: absolute; 26 top: 0; 27 left: 0; 28 right: 0; 29 bottom: 0; 30 margin: auto; 31 content: ''; 32 border-radius: 50%; 33 display: block; 34 width: 20em; 35 height: 20em; 36 left: -5em; 37 text-align: center; 38 transition: box-shadow 0.5s ease-out; 39 z-index: -1; 40} 41 42button:hover { 43 color: #fff; 44 border: 1px solid rgb(40, 144, 241); 45} 46 47button:hover::before { 48 box-shadow: inset 0 0 0 10em rgb(40, 144, 241); 49} 50
8.4K views
8.4K views
Comments
MIT License