Skip to content

Instantly share code, notes, and snippets.

@nathos

nathos/twitterbutton.sass

Last active September 26, 2015 18:17
Show Gist options
  • Save nathos/1138540 to your computer and use it in GitHub Desktop.
Save nathos/1138540 to your computer and use it in GitHub Desktop.
Download ZIP
Scalable twitter button
Raw
twitterbutton.sass
.twitterbutton
// change size to any (reasonable) percentage/px you want
// font-size: 200%
color: #4e839e
font-family: "Helvetica Neue", Arial, sans-serif
font-weight: 300
line-height: 1em
text-decoration: none !important
text-rendering: optimizeLegibility
padding: 0.5em 0.7em
+background-image(linear-gradient(#fff, #d1e4ef))
border: 0.1em solid #d1e4ef
+border-radius(0.25em)
&:hover
color: #3c7692
&:visited
color: #4e839e
.bird
height: 1.2em
vertical-align: text-bottom
margin-right: 0.2em
min-width: 1.75em
.wordmark
height: 0.82em
vertical-align: baseline
min-width: 4.1em
Raw
twitterbuttontest.haml
.twittertest
%a.twitterbutton{:href => "/"}
%img.bird{:src => "/images/twitter/bird.png"}
Sign in with
%img.wordmark{:src => "/images/twitter/wordmark.png", :alt => "Twitter"}
@nathos
Copy link
Author

nathos commented Aug 10, 2011

Download the bird & wordmark images here

Check out a screenshot of the button in action here

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