Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
extrude text on hover
<!doctype html>
<html lang="en">
<title>Extruding Text on Hover (example)</title>
<style type="text/css">
body {
background-color: #444;
text-align: center;
.extruded {
color: #888;
font-family: proxima-nova-1, proxima-nova-2, 'Helvetica Neue', Arial, sans-serif;
font-size: 48px;
font-weight: bold;
text-shadow: #000 1px 1px, #000 2px 2px, #000 3px 3px;
position: relative;
-moz-transition: all 0.3s ease-out; /* FF3.7+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5 */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
transition: all 0.3s ease-out;
.extruded:hover {
color: #FFF;
text-shadow: #58E 1px 1px, #58E 2px 2px, #58E 3px 3px, #58E 4px 4px, #58E 5px 5px, #58E 6px 6px;
left: -6px;
top: -6px;
<span class="extruded">Extrude Me</span>
Copy link


Copy link


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment