"Simple CSS Based Buttons for Web Pages and Newsletters"
Bootstrap 4.1.1 Snippet by nirav.mandli

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div style="width:200px;background-color:#D14836;border:1px solid #999;border-radius:4px;padding:10px; margin:10px 5px"> <div style="padding-right:10px;padding-left:10px"> <a href="#" style="text-decoration:none" target="_blank"><span style="font-size:12px;font-family:Arial;font-weight:bold;color:#fff;white-space:nowrap;display:block; text-align:center">Google Red with White Text</span></a> </div> </div> <div style="width:200px;background-color:#f1f1f1;border:1px solid #999;border-radius:4px;padding:10px; margin:10px 5px"> <div style="padding-right:10px;padding-left:10px"> <a href="#" style="text-decoration:none" target="_blank"><span style="font-size:12px;font-family:Arial;font-weight:bold;color:#444;white-space:nowrap;display:block; text-align:center">Gmail Gray with Black Text</span></a> </div> </div> <div style= "width:200px;background-color:#0370EA;border:1px solid #076BD2;border-radius:4px;padding:10px; margin:10px 5px"> <div style="padding-right:10px;padding-left:10px"> <a href="#" style="text-decoration:none" target="_blank"><span style= "font-size:12px;font-family:Arial;font-weight:bold;color:#fff;white-space:nowrap;display:block; text-align:center"> Google Chrome Blue Button</span></a> </div> </div> <div style= "width:200px;background-color:#4D90FE;border:1px solid #3079ED;border-radius:4px;padding:10px; margin:10px 5px"> <div style="padding-right:10px;padding-left:10px"> <a href="#" style="text-decoration:none" target="_blank"><span style= "font-size:12px;font-family:Arial;font-weight:bold;color:#fff;white-space:nowrap;display:block; text-align:center"> Google Blue Button</span></a> </div> </div> <div style= "width:200px;background-color:#4CADCB;border:1px solid #02A9D6;border-radius:4px;padding:10px; margin:10px 5px"> <div style="padding-right:10px;padding-left:10px"> <a href="#" style="text-decoration:none" target="_blank"><span style= "font-size:12px;font-family:Arial;font-weight:bold;color:#fff;white-space:nowrap;display:block; text-align:center"> Google Nexus Green Button</span></a> </div> </div> <div style= "width:200px;background-color:#5B74A8;border:1px solid #29447E;border-radius:4px;padding:10px; margin:10px 5px"> <div style="padding-right:10px;padding-left:10px"> <a href="#" style="text-decoration:none" target="_blank"><span style= "font-size:12px;font-family:Arial;font-weight:bold;color:#fff;white-space:nowrap;display:block; text-align:center"> Facebook Blue with White</span></a> </div> </div> <div style= "width:200px;background-color:#ECEEF5;border:1px solid #CAD4E7;border-radius:4px;padding:10px; margin:10px 5px"> <div style="padding-right:10px;padding-left:10px"> <a href="#" style="text-decoration:none" target="_blank"><span style= "font-size:12px;font-family:Arial;font-weight:bold;color:#3B5998;white-space:nowrap;display:block; text-align:center"> Facebook Like Button</span></a> </div> </div> <div style= "width:200px;background-color:#E4F3FF;border:1px solid #79BCEA;border-radius:4px;padding:10px; margin:10px 5px"> <div style="padding-right:10px;padding-left:10px"> <a href="#" style="text-decoration:none" target="_blank"><span style= "font-size:12px;font-family:Arial;font-weight:bold;color:#1E75BD;white-space:nowrap;display:block; text-align:center"> Dropbox Blue Button</span></a> </div> </div> <div style= "width:200px;background-color:#E51400;border:1px solid #E51400;border-radius:4px;padding:10px; margin:10px 5px"> <div style="padding-right:10px;padding-left:10px"> <a href="#" style="text-decoration:none" target="_blank"><span style= "font-size:12px;font-family:Arial;font-weight:bold;color:#fff;white-space:nowrap;display:block; text-align:center"> Windows Phone Red Button</span></a> </div> </div> <div style= "width:200px;background-color:#FECD57;border:1px solid #FBC43C;border-radius:4px;padding:10px; margin:10px 5px"> <div style="padding-right:10px;padding-left:10px"> <a href="#" style="text-decoration:none" target="_blank"><span style= "font-size:12px;font-family:Arial;font-weight:bold;color:#333333;white-space:nowrap;display:block; text-align:center"> Amazon Yellow and Black</span></a> </div> </div> </div> </div>

Related: See More


Questions / Comments: