20K views
CSSAdd prefixes
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}
HTML
1 2<button class="noselect"><span class="text">Delete</span><span class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"></path></svg></span></button>