HTML reset copy

<br><br><br> <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>

CSS reset copy

.button { text-align: center; border: 1px solid transparent; padding: 14px 48px; font-size: 17px; border-radius: 4px; cursor: pointer;} .blue{ background-color: rgba(0, 144, 231, 0.2); 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); } .gray { color: #000; background-color: rgba(228, 234, 236, 0.2); rgba(228, 234, 236, 0); border-color: #000;} .gray:hover { color: #000; background-color: #e4eaec; border-color: #e4eaec; } .gray:focus { box-shadow: 0 0 0 3px rgba(228, 234, 236, 0.5); } .green { color: #00d25b; background-color: rgba(0, 210, 91, 0.2); border-color: rgba(0, 210, 91, 0); } .green:hover { color: #fff; background-color: #00d25b; border-color: #00d25b; } .green:focus { box-shadow: 0 0 0 3px rgba(0, 210, 91, 0.5); } .red { color: #fc424a; background-color: rgba(252, 66, 74, 0.2); border-color: rgba(252, 66, 74, 0); } .red:hover { color: #fff; background-color: #fc424a; border-color: #fc424a; } .red:focus { box-shadow: 0 0 0 3px rgba(252, 66, 74, 0.5); } .purple { color: #8f5fe8; background-color: rgba(143, 95, 232, 0.2); border-color: rgba(143, 95, 232, 0); } .purple:hover { color: #fff; background-color: #8f5fe8; border-color: #8f5fe8; } .purple:focus { box-shadow: 0 0 0 3px rgba(143, 95, 232, 0.5);} .orange { color: #ffab00; background-color: rgba(255, 171, 0, 0.2); border-color: rgba(255, 171, 0, 0); } .orange:hover { color: #fff; background-color: #ffab00; border-color: #ffab00; } .orange:focus{ box-shadow: 0 0 0 3px rgba(255, 171, 0, 0.5); } .white { color: #000; background-color: rgba(255, 255, 255, 0.2); border-color: #000; } .white:hover { color: #000; background-color: #fff; border-color: #000; } .white:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5); } .dark { color: #fff; background-color: #18191b; border-color: #252321; } .dark:hover { color: #fff; background-color: #252321; border-color: 18191b; } .dark:focus { color: #fff; background-color: #222222; border-color: 18191b; box-shadow: 0 0 0 0.2rem rgba(49, 49, 49, 0.5); } .link { background-color: transparent; color: #007FFF; text-decoration: none; } .link:hover { color: cyan; text-decoration: underline; } .link:focus { text-decoration: underline; }