3.5K views
CSSAdd prefixes
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
HTML
1<button> 2 <svg viewBox="0 0 16 16" class="bi bi-twitter" fill="currentColor" height="18" width="18" xmlns="http://www.w3.org/2000/svg"> 3 <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path> 4 </svg> 5 <span>Twitter</span> 6</button>