Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
More experiments with HTML+CSS button styling
<!DOCTYPE html>
<html>
<head>
<title>Button styles</title>
<style>
/******************************************************************************
Reset styles
Based on Eric Meyer's fine work: http://meyerweb.com/eric/tools/css/reset/
******************************************************************************/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, audio, video {
border-style: none;
border-color: inherit;
border-width: 0;
margin: 0;
padding: 0;
font-size: 100%;
font-weight: normal;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style: none;
}
blockquote {
quotes: none;
}
blockquote:before, blockquote:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
q { quotes: '\201C' '\201D' "\2018" "\2019" }
q:before { content: open-quote }
q:after { content: close-quote }
html * {
/* Slightly soften the hover/focus effect */
-webkit-transition: all 100ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
-moz-transition: all 100ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
-o-transition: all 100ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
transition: all 100ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
}
</style>
<style>
html {
padding: 1em;
background-color: #f0f0f0;
}
body {
border-top: 1px dotted #d1d1d1;
border-bottom: 1px dotted #ffffff;
padding: 0;
font-size: 12px;
font-family: Helmet, Freesans, sans-serif; /* See http://blog.mhurrell.co.uk/post/2946358183 */
line-height: 1.666667em;
}
p {
margin: 0;
padding: 1em;
border-bottom: 1px dotted #d1d1d1;
border-top: 1px dotted #ffffff;
}
p+p {
}
b,
strong,
em {
padding: 0.5em;
background-color: rgba(222,82,67,0.25);
border-radius: 0.25em;
}
b:hover,
strong:hover,
em:hover {
padding: 1em;
margin: 0 -0.5em;
}
</style>
<style>
a {
display: inline-block;
vertical-align: middle;
padding: 8px 16px;
color: #f1f1f1; /* Older browsers */
color: rgba(255,255,255,0.8);
background: #4c83b6 url("http://i.imgur.com/aeKDb.png") top left repeat-x; /* You'll want to host this locally */
background-image: -webkit-linear-gradient(-90deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0.9) 2%, rgba(255,255,255,0.5) 2%, rgba(255,255,255,0.1) 98%, rgba(255,255,255,0) 99%);
background-image: -moz-linear-gradient(-90deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0.9) 2%, rgba(255,255,255,0.5) 2%, rgba(255,255,255,0.1) 98%, rgba(255,255,255,0) 99%);
background-image: -ms-linear-gradient(-90deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0.9) 2%, rgba(255,255,255,0.5) 2%, rgba(255,255,255,0.1) 98%, rgba(255,255,255,0) 99%);
background-image: -o-linear-gradient(-90deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0.9) 2%, rgba(255,255,255,0.5) 2%, rgba(255,255,255,0.1) 98%, rgba(255,255,255,0) 99%);
background-image: linear-gradient(-90deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0.9) 2%, rgba(255,255,255,0.5) 2%, rgba(255,255,255,0.1) 98%, rgba(255,255,255,0) 99%);
box-shadow: 0 -1px 2px rgba(0,0,0,0.4) inset;
font-weight: bold;
text-decoration: none;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3);
-webkit-background-clip: padding-box;
}
a:hover,
a:focus,
a:active {
background-position: bottom left;
background-image: -webkit-linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0.9) 2%, rgba(255,255,255,0.5) 2%, rgba(255,255,255,0.1) 98%, rgba(255,255,255,0) 99%);
background-image: -moz-linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0.9) 2%, rgba(255,255,255,0.5) 2%, rgba(255,255,255,0.1) 98%, rgba(255,255,255,0) 99%);
background-image: -ms-linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0.9) 2%, rgba(255,255,255,0.5) 2%, rgba(255,255,255,0.1) 98%, rgba(255,255,255,0) 99%);
background-image: -o-linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0.9) 2%, rgba(255,255,255,0.5) 2%, rgba(255,255,255,0.1) 98%, rgba(255,255,255,0) 99%);
background-image: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0.9) 2%, rgba(255,255,255,0.5) 2%, rgba(255,255,255,0.1) 98%, rgba(255,255,255,0) 99%);
box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset;
}
a:focus,
a:active {
}
* + a {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
a + a {
border-radius: 0;
}
a:first-of-type {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
a:last-of-type {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
/* Special cases */
a.single {
border-radius: 6px;
}
/* Decorative stuff */
a.destructive {
background-color: #de5243;
}
a.positive {
background-color: #709024;
}
a.negative {
background-color: #47464a;
}
</style>
</head>
<body>
<p><a href="https://google.com/" class="positive">Open</a></p>
<p><a href="https://google.com/" class="destructive">Open</a><a href="https://google.com/" class="">Open</a><a href="https://google.com/" class="negative">Open</a></p>
<p><a href="https://google.com/" class="">Open</a><a href="https://google.com/" class="destructive">Delete</a><a href="https://google.com/" class="positive">Favourite</a><a href="https://google.com/" class="negative">Dislike</a></p>
<p>Text before <a href="https://google.com/" class="">Open</a> and after</p>
<p><strong>Elements</strong> before <a href="https://google.com/" class="">Open</a></p>
<p><a href="https://google.com/" class="">Open</a> Elements <em>after</em></p>
<p><strong>Elements</strong> before <a href="https://google.com/" class="">Open</a> and <em>after</em></p>
<p><strong>Elements</strong> before <a href="https://google.com/" class="">Open</a><a href="https://google.com/" class="destructive">Close</a> and <em>after</em></p>
<p><strong>Elements</strong> before <a href="https://google.com/" class="single">Open</a> text between <a href="https://google.com/" class="single destructive">Close</a> and elements <em>after</em></p>
<p><strong>Elements</strong> before <a href="https://google.com/" class="single">Open</a> <b>between</b> <a href="https://google.com/" class="destructive">Close</a> and <em>after</em></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.