CSS Web Buttons Block Properties

all reset ☀ Lights Netbax Online Editor Try it Yourself Run

HTML

CSS

.button {
 text-align: center;
border: 1px solid transparent;
padding: 4px 48px;
font-size: 17px;
border-radius: 4px;
cursor: pointer;}

.blue{
  background-color: rgba(0, 144, 231, 0.2);
  background-image: none;
  border-color: rgba(0, 144, 231, 0); }
.blue:not(.blue-light) {
    color: #0090e7; }
  .blue:hover{
    color: #ffffff;
    background-color: #0090e7;
    border-color: #0090e7; }
  .blue:focus {
   box-shadow: 0 0 0 3px rgba(0, 144, 231, 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); }

.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); }
 
.lg{
  padding: 1rem 2rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.1875rem;

}

.float-right {
  float: right !important; }

.block
{display: block;
  width: 100%; 
margin-top: 0.5rem; }

input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%; }

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

HTML reset copy

CSS reset copy

HTML

CSS