Tags:
39 | 0 | 0
@charset "UTF-8"; @import 'https://fonts.googleapis.com/css?family=Space+Mono'; html, body { width: 100vw; height: 100vh; background: #151515; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; overflow: hidden; } button { font-family: "Space Mono", monospace; letter-spacing: 1px; background: none; color: white; position: relative; outline: none; border: none; height: 50px; width: 190px; font-size: 14px; z-index: 2; transition: 0.01s 0.23s ease-out all; overflow: hidden; } button:before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 55%; background: #202020; z-index: -1; transition: 0.3s ease-in all; } button:after { content: ""; position: absolute; left: -5%; top: 5%; height: 90%; width: 5%; background: white; z-index: -1; transition: 0.4s 0.02s ease-in all; } button:hover { cursor: pointer; color: transparent; } button:hover:before { left: 100%; width: 25%; } button:hover:after { left: 100%; width: 70%; } button:hover .icon-right.after:after { left: -80px; color: white; transition: 0.2s 0.2s ease all; } button:hover .icon-right.after:before { left: -104px; top: 14px; opacity: 0.2; color: white; } .icon-right { position: absolute; top: 0; right: 0; } .icon-right:after { font-family: "FontAwesome"; content: "→"; font-size: 24px; display: inline-block; position: relative; top: 26px; transform: translate3D(0, -50%, 0); } .icon-right.after:after { left: -250px; color: black; transition: 0.15s 0.25s ease left, 0.5s 0.05s ease color; } .icon-right.after:before { content: "Explore"; position: absolute; left: -230px; top: 14px; opacity: 0; transition: 0.2s ease-in all; } .signature { position: fixed; font-family: sans-serif; font-weight: 100; bottom: 10px; left: 0; letter-spacing: 4px; font-size: 10px; width: 100vw; text-align: center; color: white; text-transform: uppercase; text-decoration: none; }
Latest Comments section by users