JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<button>Check out my sexy curves</button>

CSS

button {
    font-family: arial;
    font-size: 12px;
    color: #262c39;
    text-shadow: 0 1px #fff;
    border: 1px solid #aaa;
    background: #e2e2e2;
    border-radius: 3px;
    padding: 5px;
    box-shadow: inset 0 1px 0 0 #f4f4f4,  inset 0 -1px 0 0 #d6d6d6;
}

button:hover {
    border-color: black;
}

button:focus {
    /*outline-color: red;*/
    outline: 0;
    box-shadow: inset 0 1px 0 0 #f4f4f4, inset 0 -1px 0 0 #d6d6d6, 0 0 0 1px rgba(41,106,204,.5);
    position: relative;
    overflow: visible;
}

button:focus:before {
   content: " ";
   position: absolute;
   top: -1px;
   left: -1px;
   right: -1px;
   bottom: -1px;
   border: 1px solid rgba(41,106,204,.5);
   border-radius: 3px;
}

JavaScript

/**
    buttons - with rounded inner border and focus state
*/