<!--
    Demo for this article:
    http://blustemy.io/designing-buttons-in-css/
-->

<h4>Default</h4>
<p>
    <a href="#" class="button">Link</a>
    <button type="button" class="button">Button</button>
    <input type="button" class="button" value="Input"/>
    <a href="#" class="button button-outline">Outline</a>
    <a href="#" class="button button-round">1</a>
    <a href="#" class="button button-round button-outline">23</a>
    <a href="#" class="button button-text">Text</a>
</p>

<h4>Alternative color</h4>
<p>
    <a href="#" class="button button-alt">Link</a>
    <button type="button" class="button button-alt">Button</button>
    <input type="button" class="button button-alt" value="Input"/>
    <a href="#" class="button button-outline button-alt">Outline</a>
    <a href="#" class="button button-round button-alt">1</a>
    <a href="#" class="button button-round button-outline button-alt">23</a>
    <a href="#" class="button button-text button-alt">Text</a>
</p>

<h4>Disabled</h4>
<p>
    <a href="#" class="button disabled">Link</a>
    <button class="button" type="button" disabled>Button</button>
    <input type="button" class="button" disabled value="Input"/>
    <a href="#" class="button button-outline disabled">Outline</a>
    <a href="#" class="button button-round disabled">1</a>
    <a href="#" class="button button-round button-outline disabled">23</a>
    <a href="#" class="button button-text disabled">Text</a>
</p>

<h4>Small</h4>
<p>
    <a href="#" class="button button-small">Link</a>
    <button type="button" class="button button-small">Button</button>
    <input type="button" class="button button-small" value="Input"/>
    <a href="#" class="button button-outline button-small">Outline</a>
    <a href="#" class="button button-round button-small">1</a>
    <a href="#" class="button button-round button-outline button-small">23</a>
    <a href="#" class="button button-text button-small">Text</a>
</p>

<h4>Large</h4>
<p>
    <a href="#" class="button button-large">Link</a>
    <button type="button" class="button button-large">Button</button>
    <input type="button" class="button button-large" value="Input"/>
    <a href="#" class="button button-outline button-large">Outline</a>
    <a href="#" class="button button-round button-large">1</a>
    <a href="#" class="button button-round button-outline button-large">23</a>
    <a href="#" class="button button-text button-large">Text</a>
</p>
/*
    Demo for this article:
    http://blustemy.io/designing-buttons-in-css/
*/

body {
    font-family: "Arial", sans-serif;
}

/* Default button */
.button {
    display: inline-block;
    box-sizing: border-box;
    margin: 0 .5em .5em 0;
    padding: .5em 1em;
    border: .075rem solid rgba(0, 0, 0, .1);
    border-radius: .15em;
    background-color: #1098ad;
    background-image: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
    color: white;
    text-decoration: none;
    font-family: inherit;
    font-size: inherit;
    line-height: 1;
    box-shadow:
        0 .075rem .1rem rgba(0, 0, 0, .15),
        inset 0 .075rem rgba(255, 255, 255, .3);
}

.button:hover,
.button:focus {
    border-color: rgba(0, 0, 0, .5);
    background-image: linear-gradient(rgba(255, 255, 255, .1), rgba(0, 0, 0, .1));
}

.button:focus {
    outline: .075rem dotted #bbb;
    outline-offset: .2rem;
}

.button:active {
    background-image: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
    box-shadow:
        inset 0 .075rem .1rem rgba(0, 0, 0, .2);
}

/* Outline button */
.button-outline {
    background-color: transparent;
    background-image: none;
    border-color: #1098ad;
    color: #1098ad;
    box-shadow: none;
}

.button-outline:hover,
.button-outline:focus {
    background-color: #1098ad;
    background-image: none;
    color: white;
}

/* Round button */
.button-round {
    width: 2.15em;
    height: 2.15em;
    padding-left: 0;
    padding-right: 0;
    border-radius: 50%;
    text-align: center;
}

/* Text button */
.button-text {
    padding-left: 0;
    padding-right: 0;
    border: transparent;
    background-color: transparent;
    background-image: transparent;
    box-shadow: none;
    color: #1098ad;
}

.button-text:hover,
.button-text:focus {
    background: none;
    text-decoration: underline;
    box-shadow: none;
}

/* Alternative color */
.button-alt:not(.button-outline):not(.button-text) {
    background-color: #c2255c;
}

.button-alt.button-outline {
    border-color: #c2255c;
    color: #c2255c;
}

.button-alt.button-outline:hover,
.button-alt.button-outline:focus {
    border-color: rgba(0, 0, 0, .5);
    background-color: #c2255c;
    color: white;
}

.button-alt.button-text {
    color: #c2255c;
}

/* Disabled */
.button.disabled,
.button[disabled] {
    opacity: .5;
    pointer-events: none;
}

/* Sizes */
.button-small {
    font-size: .8em;
}

.button-large {
    font-size: 1.25em;
}
/*
    Demo for this article:
    http://blustemy.io/designing-buttons-in-css/
*/
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.