#e8e8e8
1button { 2 width: 150px; 3 height: 50px; 4 cursor: pointer; 5 display: flex; 6 align-items: center; 7 background: red; 8 border: none; 9 border-radius: 5px; 10 box-shadow: 1px 1px 3px rgba(0,0,0,0.15); 11 background: #e62222; 12} 13 14button, button span { 15 transition: 200ms; 16} 17 18button .text { 19 transform: translateX(35px); 20 color: white; 21 font-weight: bold; 22} 23 24button .icon { 25 position: absolute; 26 border-left: 1px solid #c41b1b; 27 transform: translateX(110px); 28 height: 40px; 29 width: 40px; 30 display: flex; 31 align-items: center; 32 justify-content: center; 33} 34 35button svg { 36 width: 15px; 37 fill: #eee; 38} 39 40button:hover { 41 background: #ff3636; 42} 43 44button:hover .text { 45 color: transparent; 46} 47 48button:hover .icon { 49 width: 150px; 50 border-left: none; 51 transform: translateX(0); 52} 53 54button:focus { 55 outline: none; 56} 57 58button:active .icon svg { 59 transform: scale(0.8); 60}
30K views
30K views
Comments
1Maxwell011 4. August at 13:32
4. August at 13:32
Nice design I really like it
MIT License