Created
April 23, 2013 16:49
-
-
Save davefearon/5445334 to your computer and use it in GitHub Desktop.
A CodePen by Dave Fearon. Twitter Button Concept by Erik Deiner - Recreation of the popular shot: http://dribbble.com/shots/457259-Twitter-Button-Concept Works best in Webkit browsers. Windows XP users won't see a perspective effect. ** I am incredibly surprised and thankful for how popular this pen has become. Please make sure you go and follow…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<section> | |
<div class="button"> | |
<a href="https://twitter.com/bennettfeely" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @bennettfeely</a> | |
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> | |
</div> | |
<div class="cover"> | |
<div class="innie"></div> | |
<div class="spine"></div> | |
<div class="outie"></div> | |
</div> | |
<div class="shadow"></div> | |
</section> | |
<small>Live version of Erik Deiner's <a target="_blank" href="http://dribbble.com/shots/457259-Twitter-Button-Concept">Twitter Button Concept</a> on Dribbble.</small> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { box-sizing: border-box; } | |
body { | |
padding: 5rem; | |
text-align: center; | |
background-image: -webkit-radial-gradient(center top, circle farthest-corner, #FFFFFF 0%, #D8DFE9 100%); | |
background-image: radial-gradient(circle farthest-corner at center top, #FFFFFF 0%, #D8DFE9 100%); | |
} | |
section, section div { | |
/* See it in slo-mo, you can change this */ | |
transition: .6s; | |
} | |
section, button { transition-timing-function: ease; } | |
section { | |
display: inline-block; | |
position: relative; | |
padding: .375rem .375rem 0; | |
height: 2.5rem; | |
background: #A9ADB6; | |
border-radius: .25rem; | |
perspective: 300; | |
box-shadow: 0 -1px 2px #fff, inset 0 1px 2px rgba(0,0,0,.2), inset 0 .25rem 1rem rgba(0,0,0,.1); | |
} | |
.button { opacity: 0; } | |
.cover { | |
position: absolute; | |
top: 0; right: 0; bottom: 0; left: 0; | |
transform-origin: center bottom; | |
transform-style: preserve-3d; | |
font: 1.25em/2 "icon"; | |
color: white; | |
text-align: center; | |
pointer-events: none; | |
z-index: 100; | |
} | |
.innie, .outie, .spine, .shadow { position: absolute; width: 100%; } | |
.innie, .outie { | |
height: 100%; | |
background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,.1) 100%); | |
border-radius: .25rem; | |
} | |
.innie:after, .outie:after { content:"t"; } | |
.innie { | |
background-color: #67E2FE; | |
text-shadow: 0 -2px 4px rgba(0,0,0,.2); | |
} | |
.spine { | |
top: .25rem; | |
background: #20C7F3; | |
height: .25rem; | |
transform: rotateX(90deg); | |
transform-origin: center top; | |
} | |
.shadow { | |
top: 100%; | |
left: 0; | |
height: 3.5rem; | |
transform-origin: center top; | |
transform: rotateX(90deg); | |
opacity: 0; | |
z-index: 0; | |
background-image: -webkit-linear-gradient(top, rgba(0,0,0,.6) 0%, transparent 100%); | |
background-image: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 100%); | |
border-radius: .4rem; | |
} | |
.outie { | |
background-color: #2EC8FA; | |
transform: translateZ(.25rem); | |
text-shadow: 0 2px 4px rgba(0,0,0,.2); | |
} | |
section:hover { background: #EBEFF2; } | |
section:hover .button { opacity: 1; } | |
section:hover .cover, section:hover .innie, section:hover .spine, section:hover .outie, section:hover .spine { transition-timing-function: cubic-bezier(.2,.7,.1,1.1); } | |
section:hover .cover { transform: rotateX(-120deg); } | |
section:hover .innie { background-color: #3ADAFC; } | |
section:hover .spine { background-color: #52B1E0; } | |
section:hover .outie { background-color: #2174A0; color: rgba(255,255,255,0); } | |
section:hover .shadow { | |
opacity: 1; | |
transform: rotateX(45deg) scale(.95); | |
} | |
small { | |
display: block; | |
padding: 5rem; | |
font: .8rem/1 sans-serif; | |
color: #777; | |
} | |
small a { color: #222; text-decoration: none; border-bottom: 1px solid #ccc; } | |
small a:hover { border-bottom-color: #222; } | |
/* Twitter font icon: http://codepen.io/bennettfeely/pen/GCAKJ */ | |
@font-face { font-family:icon; src: url('http://bennettfeely.com/fonts/icons.woff'); } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment