Skip to content

Instantly share code, notes, and snippets.

@johnlouie04
Last active October 12, 2015 17:07
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save johnlouie04/4059063 to your computer and use it in GitHub Desktop.
Simple button and easy to implement
/**
* 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;
}
<!-- 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>
{"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