Skip to content

Instantly share code, notes, and snippets.

@johnlouie04

johnlouie04/button.css

Last active October 12, 2015 17:07
Show Gist options
  • Save johnlouie04/4059063 to your computer and use it in GitHub Desktop.
Save johnlouie04/4059063 to your computer and use it in GitHub Desktop.
Download ZIP
Simple button and easy to implement
Raw
button.css
/**
* The first commented line is your dabblet’s title
*/
[class^="button"],
[class*=" button"]
{
padding: 5px;
outline: none;
border: 1px solid rgba(0, 0, 0, 0.3);
background: #1f69ae;
color: #fff;
display: inline-block;
position: relative;
line-height: 100%;
cursor:pointer;
float: left;
margin: 0;
}
class^="button"]:hover,
[class*=" button"]:hover
{
box-shadow: inset 1px 1px 1px #000;
}
.buttonGreen
{
background: #009900;
}
.buttonOrange
{
background: #f03d25;
}
.buttonGray
{
background: #414141;
}
.buttonLightGray
{
background: #808080;
}
Raw
button.html
<!-- content to be placed inside <body>…</body> -->
<button class="button">Button</button>
<button class="buttonGreen">Button</button>
<button class="buttonOrange">Button</button>
<button class="buttonGray">Button</button>
<button class="buttonLightGray">Button</button>
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment