CSS Button Styles

by abhitalks

HTML

<button class="ok">
    <i></i>
    <span>Ok</span>
</button>
<button class="cancel">
    <i></i>
    <span>Cancel</span>
</button>
<hr/>
<input type="button" value="Cancel" data-value="Cancel" />

CSS

button { 
    min-width: 72px; height: auto; 
    display: inline-block; vertical-align: top; 
}
button.ok i::after {
    content: '\2713'; display: block;
    font-size: 23px; font-style: normal; font-weight: 600; color: green;
}
button.cancel i::after {
    content: '\00d7'; display: block;
    font-size: 26px; font-style: normal; font-weight: 600; color: red;
}

input[type=button] {
    min-width: 72px; height: 64px; position: relative;
    display: inline-block; vertical-align: top; padding-top: 36px;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/1e/Emoji_u274c.svg'), 
        linear-gradient(#f5f5f5, #dfdfdf);
    background-repeat: no-repeat, no-repeat;
    background-position: center 4px, center center;
    background-size: 24px, auto;
    border: 1px solid #aaa; border-radius: 3px;
}
input[type=button]:active {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/1e/Emoji_u274c.svg'), 
        linear-gradient(#dfdfdf, #f5f5f5);
    background-repeat: no-repeat, no-repeat;
    background-position: center 4px, center center; 
    background-size: 24px, auto;
    outline: 0px;
}
input[type=button]:focus { outline: 0px; }