Skip to content

Instantly share code, notes, and snippets.

@stream7
Forked from LeaVerou/dabblet.css
Created July 12, 2013 20:39
Show Gist options
  • Save stream7/5987652 to your computer and use it in GitHub Desktop.
Save stream7/5987652 to your computer and use it in GitHub Desktop.
Flexible buttons with ems (duh!)
/**
* Flexible buttons with ems (duh!)
*/
body {
font-family: sans-serif
}
button {
padding: .5em .8em .4em;
border: 1px solid transparent; /* We want this to be 1px regardless of button size */
border-radius: .3em;
background: hsl(330, 100%, 50%);
background-image: linear-gradient(hsla(330,0%,100%,.5), hsla(0,0%,100%,0));
box-shadow: 0 1px white inset, /* We want this to be 1px regardless of button size */
0 .3em hsl(330, 100%, 30%),
0 .3em .8em rgba(0,0,0,.5);
color: white;
text-shadow: 0 -.06em .1em hsla(330, 100%, 10%, .5);
font: inherit;
}
p.emphasized {
font-size: 160%;
}
footer {
font-size: 70%;
}
<button>Cheesy pink button</button>
<p class="emphasized">This ia paragraph with large text.
<button>And another button</button>
</p>
<footer>
This is a footer with small text.
<button>Oh, and a button</button>
</footer>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment