JSFiddle - React, Tailwind, and code Playground

by bluetidepro

HTML

<a href="#" class="a_button">A</a>
<a href="#" class="b_button">B</a>
<a href="#" class="c_button">C</a>
<a href="#" class="d_button">D</a>
<a href="#" class="f_button">F</a>

CSS

body{margin:10px;}

.a_button, .b_button, .c_button, .d_button, .f_button{
    display:block;
    width:25px;
    height:25px;
    font-size:16px;
    font-weight:bold;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    color:#fff;
    line-height:21px;
    text-align:center;
    background:#75ae02;
    -moz-border-radius:50px;
    -webkit-border-radius:50px;
    border-radius:50px;
    -khtml-border-radius:50px;
    text-decoration:none;
    text-shadow:1px 1px 0 #000;
}
.b_button{background:#4c7000;}
.c_button, .d_button{background:#454545;}
.f_button{background:#181818;}
.a_button:hover, .b_button:hover, .c_button:hover, .d_button:hover, .f_button:hover{
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity 0.5;
    opacity:0.5;
}