JSFiddle - React, Tailwind, and code Playground

Simple Clean Buttons

by Jennifer Perrin

HTML

<button>&#9829;</button>
<button class="cornered">&#9829;</button>
<button class="round">&#9829;</button>

<button>Submit</button>
<button class="cornered">Submit</button>
<button class="round">Submit</button>

<button>&#10004;</button>
<button class="cornered">&#10008;</button>
<button class="round">&#10004;</button>

<button>Really Long Text for a Button</button>
<button class="cornered">Really Long Text for a Button</button>
<button class="round">Really Long Text for a Button</button>

CSS

body{
    padding:20px;
    background:#e7edf5;
}

button{
    margin:10px;
}

/* Copy Styles Below */
button {
    min-width:32px;
    height:32px;
    
    background-color: #f8fafb;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f8fafb), to(#d9e0ea));
    background-image: -webkit-linear-gradient(top, #f8fafb, #d9e0ea);
    background-image:    -moz-linear-gradient(top, #f8fafb, #d9e0ea);
    background-image:     -ms-linear-gradient(top, #f8fafb, #d9e0ea);
    background-image:      -o-linear-gradient(top, #f8fafb, #d9e0ea);
    background-image:         linear-gradient(top, #f8fafb, #d9e0ea);
    
    border:1px solid #a2a6ac;
    
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2), 0 0 3px rgba(255,255,255,0.6) inset, 0 -1px -1px rgba(255,255,255,1) inset;
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2), 0 0 3px rgba(255,255,255,0.6) inset, 0 -1px -1px rgba(255,255,255,1) inset;
    box-shadow: 0 1px 1px rgba(0,0,0,0.2), 0 0 3px rgba(255,255,255,0.6) inset, 0 -1px -1px rgba(255,255,255,1) inset;
    
    cursor:pointer;
    
    color:#666;
    text-shadow:0 1px 0 #fff;
}

button:hover {
    background-color: #ffffff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#edf1f7));
    background-image: -webkit-linear-gradient(top, #ffffff, #edf1f7);
    background-image:    -moz-linear-gradient(top, #ffffff, #edf1f7);
    background-image:     -ms-linear-gradient(top, #ffffff, #edf1f7);
    background-image:      -o-linear-gradient(top, #ffffff, #edf1f7);
    background-image:         linear-gradient(top, #ffffff, #edf1f7);
    border-color:#888;
}
button:active {
    background-color: #ffffff;
    border-color: #666;
    box-shadow:0 0 10px rgba(0,0,0,0.8) inset, 0 1px 0 #fff;
}

button.round {
    -webkit-border-radius:32px;
    -moz-border-radius:32px;
    border-radius:32px;
}

button.cornered {
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}