.btn41-43 { padding: 10px 25px; font-family: "Roboto", sans-serif; font-weight: 500; background: transparent; outline: none !important; cursor: pointer; transition: all 0.3s ease; position: relative; display: inline-block; } .btn-42 { border: 2px solid rgb(255, 255, 255); z-index: 1; color: white; } .btn-42:after { position: absolute; content: ""; width: 100%; height: 0; bottom: 0; left: 0; z-index: -1; background: rgb(255, 255, 255); transition: all 0.3s ease; } .btn-42:hover { color: rgb(0, 0, 0); } .btn-42:hover:after { top: 0; height: 100%; } .btn-42:active { top: 2px; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter