HTML reset copy

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <button type="button" class="button blue"><i class="fa fa-internet-explorer"></i></button> <button type="button" class="button white"><i class="fa fa-home"></i></button> <button type="button" class="button green"><i class="fa fa-envelope"></i></button> <button type="button" class="button red"><i class="fa fa-star"></i></button> <button type="button" class="button orange"><i class="fa fa-map-marker"></i></button> <button type="button" class="button purple"><i class="fa fa-heart"></i></button> <button type="button" class="button green"><i class="fa fa-music"></i></button> <button type="button" class="button blue"><i class="fa fa-signal"></i></button> <button type="button" class="button red"><i class="fa fa-arrow-up"></i></button>

CSS reset copy

.button { text-align: center; border: 1px solid transparent; font-size: 17px; border-radius: 4px; cursor: pointer; border-radius: 50px; width: 42px; height: 42px; padding: 0; margin-right: .5rem; margin-left: .5rem; } .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: #00ffea; border-color: #00ffea; } .white:hover { color: #212529; background-color: #7ec0f6; border-color: #7ec0f6; } .white:focus { color: #212529; background-color: #1f92ef; border-color: #1f92ef; box-shadow: 0 0 0 0.2rem rgba(31, 146, 239, 0.5); }