Button by mRcOol7
#e8e8e8
1button { 2 max-width: 320px; 3 display: flex; 4 overflow: hidden; 5 position: relative; 6 padding: 0.875rem 72px 0.875rem 1.75rem; 7 background-color: #4285f4; 8 color: #ffffff; 9 font-size: 15px; 10 line-height: 1.25rem; 11 font-weight: 700; 12 text-align: center; 13 text-transform: uppercase; 14 vertical-align: middle; 15 align-items: center; 16 border-radius: 0.5rem; 17 gap: 0.75rem; 18 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 19 0 2px 4px -1px rgba(0, 0, 0, 0.06); 20 border: none; 21 transition: all 0.6s ease; 22 filter: brightness(1.2); 23} 24 25button .google-icon { 26 background-color: #fff; 27 display: grid; 28 position: absolute; 29 right: 0; 30 place-items: center; 31 width: 3rem; 32 height: 100%; 33 border-radius: 0.5rem 0 0 0.5rem; 34 filter: brightness(1.2); 35} 36 37button span svg { 38 width: 1.5rem; 39 height: 1.5rem; 40 filter: drop-shadow(0 0 5px rgba(66, 133, 244, 0.8)); 41} 42 43button:hover { 44 box-shadow: 0 4px 30px rgba(66, 133, 244, 0.1), 45 0 2px 30px rgba(52, 168, 83, 0.06); 46 filter: brightness(1); 47} 48 49button:hover .google-icon { 50 filter: brightness(1); 51} 52
122 views
Variation of abutton
MIT License