CodePen

HTML

            
              <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>

<h1>Pressable CSS Buttons</h1>
<hr>
<p>Red</p>
<a class="button large regular red" href="javascript:void(0);">Button</a>
<a class="button medium regular red" href="javascript:void(0);">Button</a>
<a class="button small regular red" href="javascript:void(0);">Button</a>
<a class="button large square red" href="javascript:void(0);">Button</a>
<a class="button medium square red" href="javascript:void(0);">Button</a>
<a class="button small square red" href="javascript:void(0);">Button</a>
<a class="button large round red" href="javascript:void(0);">Button</a>
<a class="button medium round red" href="javascript:void(0);">Button</a>
<a class="button small round red" href="javascript:void(0);">Button</a>
<hr>
<p>Orange</p>
<a class="button large regular orange" href="javascript:void(0);">Button</a>
<a class="button medium regular orange" href="javascript:void(0);">Button</a>
<a class="button small regular orange" href="javascript:void(0);">Button</a>
<a class="button large square orange" href="javascript:void(0);">Button</a>
<a class="button medium square orange" href="javascript:void(0);">Button</a>
<a class="button small square orange" href="javascript:void(0);">Button</a>
<a class="button large round orange" href="javascript:void(0);">Button</a>
<a class="button medium round orange" href="javascript:void(0);">Button</a>
<a class="button small round orange" href="javascript:void(0);">Button</a>
<hr>
<p>Yellow</p>
<a class="button large regular yellow" href="javascript:void(0);">Button</a>
<a class="button medium regular yellow" href="javascript:void(0);">Button</a>
<a class="button small regular yellow" href="javascript:void(0);">Button</a>
<a class="button large square yellow" href="javascript:void(0);">Button</a>
<a class="button medium square yellow" href="javascript:void(0);">Button</a>
<a class="button small square yellow" href="javascript:void(0);">Button</a>
<a class="button large round yellow" href="javascript:void(0);">Button</a>
<a class="button medium round yellow" href="javascript:void(0);">Button</a>
<a class="button small round yellow" href="javascript:void(0);">Button</a>
<hr>
<p>Green</p>
<a class="button large regular green" href="javascript:void(0);">Button</a>
<a class="button medium regular green" href="javascript:void(0);">Button</a>
<a class="button small regular green" href="javascript:void(0);">Button</a>
<a class="button large square green" href="javascript:void(0);">Button</a>
<a class="button medium square green" href="javascript:void(0);">Button</a>
<a class="button small square green" href="javascript:void(0);">Button</a>
<a class="button large round green" href="javascript:void(0);">Button</a>
<a class="button medium round green" href="javascript:void(0);">Button</a>
<a class="button small round green" href="javascript:void(0);">Button</a>
<hr>
<p>Blue</p>
<a class="button large regular blue" href="javascript:void(0);">Button</a>
<a class="button medium regular blue" href="javascript:void(0);">Button</a>
<a class="button small regular blue" href="javascript:void(0);">Button</a>
<a class="button large square blue" href="javascript:void(0);">Button</a>
<a class="button medium square blue" href="javascript:void(0);">Button</a>
<a class="button small square blue" href="javascript:void(0);">Button</a>
<a class="button large round blue" href="javascript:void(0);">Button</a>
<a class="button medium round blue" href="javascript:void(0);">Button</a>
<a class="button small round blue" href="javascript:void(0);">Button</a>
<hr>
<p>Purple</p>
<a class="button large regular purple" href="javascript:void(0);">Button</a>
<a class="button medium regular purple" href="javascript:void(0);">Button</a>
<a class="button small regular purple" href="javascript:void(0);">Button</a>
<a class="button large square purple" href="javascript:void(0);">Button</a>
<a class="button medium square purple" href="javascript:void(0);">Button</a>
<a class="button small square purple" href="javascript:void(0);">Button</a>
<a class="button large round purple" href="javascript:void(0);">Button</a>
<a class="button medium round purple" href="javascript:void(0);">Button</a>
<a class="button small round purple" href="javascript:void(0);">Button</a>
<hr>
<p>White</p>
<a class="button large regular white" href="javascript:void(0);">Button</a>
<a class="button medium regular white" href="javascript:void(0);">Button</a>
<a class="button small regular white" href="javascript:void(0);">Button</a>
<a class="button large square white" href="javascript:void(0);">Button</a>
<a class="button medium square white" href="javascript:void(0);">Button</a>
<a class="button small square white" href="javascript:void(0);">Button</a>
<a class="button large round white" href="javascript:void(0);">Button</a>
<a class="button medium round white" href="javascript:void(0);">Button</a>
<a class="button small round white" href="javascript:void(0);">Button</a>
<hr>
<p>Grey</p>
<a class="button lightText large regular grey" href="javascript:void(0);">Button</a>
<a class="button lightText medium regular grey" href="javascript:void(0);">Button</a>
<a class="button lightText small regular grey" href="javascript:void(0);">Button</a>
<a class="button lightText large square grey" href="javascript:void(0);">Button</a>
<a class="button lightText medium square grey" href="javascript:void(0);">Button</a>
<a class="button lightText small square grey" href="javascript:void(0);">Button</a>
<a class="button lightText large round grey" href="javascript:void(0);">Button</a>
<a class="button lightText medium round grey" href="javascript:void(0);">Button</a>
<a class="button lightText small round grey" href="javascript:void(0);">Button</a>
<hr>
<p>Black</p>
<a class="button lightText large regular black" href="javascript:void(0);">Button</a>
<a class="button lightText medium regular black" href="javascript:void(0);">Button</a>
<a class="button lightText small regular black" href="javascript:void(0);">Button</a>
<a class="button lightText large square black" href="javascript:void(0);">Button</a>
<a class="button lightText medium square black" href="javascript:void(0);">Button</a>
<a class="button lightText small square black" href="javascript:void(0);">Button</a>
<a class="button lightText large round black" href="javascript:void(0);">Button</a>
<a class="button lightText medium round black" href="javascript:void(0);">Button</a>
<a class="button lightText small round black" href="javascript:void(0);">Button</a>
<div></div>
<p class="attribution">Made by <a href="http://joshnh.com">Joshua Hibbert</a></p>
            
          
!

CSS

            
              html {
    text-align: center;
}
body {
    background-color: #fff;
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1));
    background-image:    -moz-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1));
    background-image:     -ms-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1));
    background-image:      -o-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1));
    background-image:         linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1));
    display: inline-block;
    font-size: 100%;
    margin: 0 auto;
    padding: 3em 6em;
    text-align: left;
}
h1 {
    background-color: #333;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:    -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:     -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:      -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:         linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    border-radius: 0 .25em 0 0;
    color: #fff0f5;
    font-family: 'open sans', sans-serif;
    font-size: 3em;
    font-weight: bold;
    line-height: 1;
    margin-left: -999em;
    margin-bottom: -2px;
    padding: 1em 1em 1em 1000em;
    text-align: center;
    text-shadow: 0 .05em .05em hsla(0,0%,0%,.1);
}
p {
    color: #333;
    display: inline-block;
    font-family: 'open sans', sans-serif;
    font-size: 1em;
    font-weight: bold;
    line-height: 1;
    margin: -1em 1em 0 0;
    width: 6em;
    vertical-align: middle;
}
hr {
    border: 1px solid #333;
    margin: 0 0 1em 0;
}
div {
    background-color: #333;
    border-radius: 0 0 .75em 0;
    color: #fff;
    font-family: 'open sans', sans-serif;
    font-size: 1em;
    font-weight: bold;
    line-height: 1;
    margin-left: -999em;
    padding: 2em 1em 2em 1007em;
    text-align: center;
}
label:after {
    color: #fff;
    content: ' #';
}
input {
    background: #fff0f5;
    border: 1px solid #222;
    color: #333;
    margin-right: 5.5em;
    padding: .5em;
}
.attribution {
    color: #888;
    margin-top: 3em;
    text-align: right;
    width: 100%;
}
.attribution a {
    color: #888;
}
.attribution a:hover,
.attribution a:focus {
    color: #333;
}

/* Button - these styles are the good stuff */

.button {
    background-color: #999;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:    -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:     -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:      -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:         linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    border: none;
    border-radius: .5em;
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,0.1),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.25),
                0 .25em .25em hsla(0,0%,0%,.05);
    color: #444;
    cursor: pointer;
    display: inline-block;
    font-family: sans-serif;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.5;
    margin: 0 .5em 1em;
    padding: .5em 1.5em .75em;
    position: relative;
    text-decoration: none;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.25);
    vertical-align: middle;
}
.button:hover {
    outline: none;
}
.button:hover,
.button:focus {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.25),
                inset 0 0 0 3em hsla(0,0%,100%,.2),
                0 .25em .25em hsla(0,0%,0%,.05);
}
.button:active {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.1),
                inset 0 0 0 3em hsla(0,0%,100%,.2),
                inset 0 .25em .5em hsla(0,0%,0%,.05),
                0 -1px 1px hsla(0,0%,0%,.1),
                0 1px 1px hsla(0,0%,100%,.25);
    margin-top: .25em;
    outline: none;
    padding-bottom: .5em;
}

/* Light Text */

.lightText {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.05),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.5),
                0 .25em .25em hsla(0,0%,0%,.1);
    color: #fff;
    text-shadow: 0 -1px 1px hsla(0,0%,0%,.25);
}
.lightText:hover,
.lightText:focus {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.05),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.5),
                inset 0 0 0 3em hsla(0,0%,100%,.2),
                0 .25em .25em hsla(0,0%,0%,.1);
}
.lightText:active {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.05),
                inset 0 0 0 3em hsla(0,0%,100%,.2),
                inset 0 .25em .5em hsla(0,0%,0%,.05),
                0 -1px 1px hsla(0,0%,0%,.1),
                0 1px 1px hsla(0,0%,100%,.25);
}

/* Large */

.large {
    font-size: 1.25em;
}

/* Medium */

.medium {
    font-size: 1em;
}

/* Small */

.small {
    font-size: .75em;
}

/* Regular */

.regular {
    border-radius: .5em;
}

/* Square */

.square {
    border-radius: .25em;
}

/* Round */

.round {
    border-radius: 1.25em;
}

/* Red */

.red {
    background-color: #ff6c6f;
}

/* Orange */

.orange {
    background-color: #f6cf6f;
}

/* Yellow */

.yellow {
    background-color: #fff6c6;
}

/* Green */

.green {
    background-color: #6fcf6f;
}

/* Blue */

.blue {
    background-color: #6fc6ff;
}

/* Purple */

.purple {
    background-color: #f6c6ff;
}

/* White */

.white {
    background-color: #eee;
}

/* Grey */

.grey {
    background-color: #999;
}

/* Black */

.black {
    background-color: #444;
}

/* Custom */

.custom {
    background-color: #fff0f5; /* Set the button color here */
    color: #444; /* Remove this for a dark background */
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................