HTML reset copy

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <br><br><br> <button type="button" class="button facebook"><i class="fa fa-facebook"></i> Facebook</button> <button type="button" class="button youtube"><i class="fa fa-youtube"></i> Youtube</button> <button type="button" class="button twitter"><i class="fa fa-twitter"></i> Twitter</button><br><br><br> <button type="button" class="button google"><i class="fa fa-google-plus"></i> Google</button> <button type="button" class="button linkedin"><i class="fa fa-linkedin"></i> Linkedin</button> <button type="button" class="button pinterest"><i class="fa fa-pinterest"></i> Pinterest</button>

CSS reset copy

.button { text-align: center; border: 1px solid transparent; padding: 4px 48px; font-size: 17px; border-radius: 4px; cursor: pointer; } .twitter { background: #2caae1; color: #ffffff; } .twi:hover, .twi:focus { background: #1b8dbf; color: #ffffff; } .facebook { background: #3b579d; color: #ffffff; } .face:hover, .face:focus { background: #2d4278; color: #ffffff; } .youtube { background: #e52d27; color: #ffffff; } .you:hover, .you:focus { background: #c21d17; color: #ffffff; } .google { background: #dc4a38; color: #ffffff; } .google:hover, .google:focus { background: #bf3322; color: #ffffff; } .linkedin { background: #0177b5; color: #ffffff; } .linkedin:hover, .linkedin:focus { background: #015682; color: #ffffff; } .pinterest { background: #cc2127; color: #ffffff; } .pinterest:hover, .pinterest:focus { background: #a01a1f; color: #ffffff; }