Buttons Generator - 3schools

Preview Button

Button Text:

Button Link:

Link Target:

Link Rel:

Font Size:

Font Weight:

Text Align:

Display:

Text Color:

Background Color:

Background Gradient:

Padding Top/Bottom:

Padding Left/Right:

Width:

Height:

Margin Top/Bottom:

Margin Left/Right:

Border Width:

Border Color:

Border Radius:

Box Shadow Horizontal:

Box Shadow Vertical:

Box Shadow Blur:

Box Shadow Spread:

Box Shadow Color:

Hover Background Color:

Hover Text Color:

Hover Box Shadow:

Hover Transform:

Animation:

.noJs { display: flex; justify-content: flex-end; align-items: center; position: fixed; top: 20px; left: 20px; right: 20px; z-index: 99; max-width: 640px; border-radius: 12px; margin: auto; padding: 10px 5px; background-color:#fce8e8; font: small/1.3 'Fira Sans', sans-serif; box-shadow: 0 10px 20px -10px rgba(0,0,0,.1); color: #e51661; } .noJs::before { content: attr(data-text); padding: 0 10px; flex-grow: 1; } .noJs label { flex-shrink: 0; padding: 10px; } .noJs label::after { content: '\2715'; line-height: 18px; font-size: 14px; } .nJs:checked ~ .noJs, .nJs{ display: none; }