CSS Web Buttons Basic Properties

Netbax Online Editor Try it Yourself

<div style="padding-bottom:4em"></div>
<button type="button" class="button blue">Blue</button>
<button type="button" class="button gray">Gray</button>
<button type="button" class="button green">Green</button>
<button type="button" class="button red">Red</button><br><br><br>
<button type="button" class="button orange">Orange</button>
<button type="button" class="button purple">Purple</button>
<button type="button" class="button white">White</button>
<button type="button" class="button dark">Dark</button><br><br><br>
<button type="button" class="button link">Link</button>

.blue{
  color: #fff;
  background-color: #0090e7;
  border-color: #0090e7; }
  .blue:hover{
    color: #fff;
    background-color: #0078c1;
    border-color: #0070b4; }
  .blue:focus {
    color: #fff;
    background-color: #0078c1;
    border-color: #0070b4;
    box-shadow: 0 0 0 0.2rem rgba(38, 161, 235, 0.5); }

.gray {
  color: #212529;
  background-color: #e4eaec;
  border-color: #e4eaec; }
  .gray:hover {
    color: #212529;
    background-color: #ced9dc;
    border-color: #c6d3d7; }
  .gray:focus {
    color: #212529;
    background-color: #ced9dc;
    border-color: #c6d3d7;
    box-shadow: 0 0 0 0.2rem rgba(199, 204, 207, 0.5); }
  
.green {
  color: #fff;
  background-color: #00d25b;
  border-color: #00d25b; }
  .green:hover {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45; }
  .green:focus {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45;
    box-shadow: 0 0 0 0.2rem rgba(38, 217, 116, 0.5); }

.red {
  color: #fff;
  background-color: #fc424a;
  border-color: #fc424a; }
  .red:hover {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a; }
  .red:focus {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a;
    box-shadow: 0 0 0 0.2rem rgba(252, 94, 101, 0.5); }

.purple {
  color: #fff;
  background-color: #8f5fe8;
  border-color: #8f5fe8; }
  .purple:hover {
    color: #fff;
    background-color: #783ee3;
    border-color: #7032e2; }
  .purple:focus {
    color: #fff;
    background-color: #783ee3;
    border-color: #7032e2;
    box-shadow: 0 0 0 0.2rem rgba(160, 119, 235, 0.5); }
 
.orange {
  color: #212529;
  background-color: #ffab00;
  border-color: #ffab00; }
  .orange:hover {
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900; }
  .orange:focus{
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900;
    box-shadow: 0 0 0 0.2rem rgba(222, 151, 6, 0.5); }

.white {
  color: #212529;
  background-color: #ffffff;
  border-color: #000; }
  .white:hover {
    color: #212529;
    background-color: #ececec;
    border-color: #e6e6e6; }
  .white:focus {
    color: #212529;
    background-color: #ececec;
    border-color: #e6e6e6;
    box-shadow: 0 0 0 0.2rem rgba(222, 222, 223, 0.5); }
 
.dark {
  color: #fff;
  background-color: #0d0d0d;
  border-color: #0d0d0d; }
  .dark:hover {
    color: #fff;
    background-color: black;
    border-color: black; }
  .dark:focus {
    color: #fff;
    background-color: black;
    border-color: black;
    box-shadow: 0 0 0 0.2rem rgba(49, 49, 49, 0.5); }

.link {
background-color: transparent;
color: #007bff;
  text-decoration: none; }
  .link:hover {
 color: #0056b3;
    text-decoration: underline; }
  .link:focus {
    text-decoration: underline; }

</style>