3D Clickable Text

HTML
<h1> <span class="light">Click ME</span> </h1>
CSS
::selection { background: rgba(0, 0, 0, 0.1); } html, body { width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(22,191,253,1) 0%, rgba(203,48,102,1) 100%); background-size: cover; display: flex; justify-content: center; align-items: center; } h1 { display: block; width: 400px; height: 200px; line-height: 200px; text-align: center; font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-size: 80px; border-top: 4px solid white; border-bottom: 4px solid white; cursor: pointer; user-select: none; } h1 span.light { color: #fefefe; text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 3px 0px #a0a0a0, 0px 4px 0px #909090, 0px 5px 10px rgba(0, 0, 0, 0.6); } h1:active { line-height: 205px; } h1:active span.light { color: #fefefe; text-shadow: 0px 0px 0px #c0c0c0, 0px 0px 0px #b0b0b0, 0px 0px 0px #a0a0a0, 0px 0px 0px #909090, 0px 1px 3px rgba(0, 0, 0, 0.4); }
JAVASCRIPT
Expand for more options Login