5.3K views
CSSAdd prefixes
1button { 2 --primary-color: #645bff; 3 --secondary-color: #fff; 4 --hover-color: #111; 5 --arrow-width: 10px; 6 --arrow-stroke: 2px; 7 box-sizing: border-box; 8 border: 0; 9 border-radius: 20px; 10 color: var(--secondary-color); 11 padding: 1em 1.8em; 12 background: var(--primary-color); 13 display: flex; 14 transition: 0.2s background; 15 align-items: center; 16 gap: 0.6em; 17 font-weight: bold; 18} 19 20button .arrow-wrapper { 21 display: flex; 22 justify-content: center; 23 align-items: center; 24} 25 26button .arrow { 27 margin-top: 1px; 28 width: var(--arrow-width); 29 background: var(--primary-color); 30 height: var(--arrow-stroke); 31 position: relative; 32 transition: 0.2s; 33} 34 35button .arrow::before { 36 content: ""; 37 box-sizing: border-box; 38 position: absolute; 39 border: solid var(--secondary-color); 40 border-width: 0 var(--arrow-stroke) var(--arrow-stroke) 0; 41 display: inline-block; 42 top: -3px; 43 right: 3px; 44 transition: 0.2s; 45 padding: 3px; 46 transform: rotate(-45deg); 47} 48 49button:hover { 50 background-color: var(--hover-color); 51} 52 53button:hover .arrow { 54 background: var(--secondary-color); 55} 56 57button:hover .arrow:before { 58 right: 0; 59}
HTML
1<button> 2 Sign up 3 <div class="arrow-wrapper"> 4 <div class="arrow"></div> 5 6 </div> 7</button>