octocatstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <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>
            
          
!
            
              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 */
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console