JSFiddle - React, Tailwind, and code Playground

Fliplet Buttons

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="btn btn-primary">Primary Button</div>
<div class="btn btn-secondary">Secondary Button</div>
<div class="btn btn-default">Default Button</div>

CSS

.btn-primary {
  background-color: #00abd2;
  border-radius: 4px;
  border: 4px solid #00abd2;
  padding: 15px 20px;
  font-size: 1.2em;
}

.btn-primary:focus,
.btn-primary:active:hover,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:active:focus {
  color: #fff;
  background-color: #007e9a;
  border-color: #007e9a;
}

.btn-secondary {
  background-color: transparent;
  color: #00abd2;
  border-radius: 4px;
  border: 4px solid #00abd2;
  padding: 15px 20px;
  font-size: 1.2em;
}

.btn-secondary:focus,
.btn-secondary:active:hover,
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:active:focus {
  color: #007e9a;
  background-color: transparent;
  border-color: #007e9a;
}

.btn-default {
  background-color: #e4e9eb;
  color: #007e9a;
  border-radius: 4px;
  border: 4px solid #e4e9eb;
  padding: 15px 20px;
  font-size: 1.2em;
}

.btn-default:focus,
.btn-default:active:hover,
.btn-default:hover,
.btn-default:active,
.btn-default:active:focus {
  color: #007e9a;
  background-color: #cbd0d2;
  border-color: #cbd0d2;
}