Letter Buttons

Best button ever, could work all over

by Victor

HTML

<div class="alphaSort">
    <a href="#">A</a>
     <a href="#">B</a>
     <a href="#">C</a>
     <a href="#">D</a>
     <a href="#">E</a>
     <a class="inactive" href="#">F</a>
     <a href="#">G</a>
     <a href="#">H</a>
     <a href="#">I</a>
     <a href="#">J</a>
     <a href="#">K</a>
     <a href="#">L</a>
     <a href="#">M</a>
     <a href="#">N</a>
  
</div>

CSS

.alphaSort {
    background:rgba(200,200,200,.2);
    width:100%;
    margin:0px;
    padding:0px;
    border-radius:5px;
}
.alphaSort a {
    display:inline;
    padding:20px 40px;
    background:#e3e3e3;
    border:1px solid #999;
    border-right: 2px solid #999;
    border-bottom: 2px solid #999;
    color:#333;
    margin:5px;
    border-radius:10px;
    text-decoration:none;
    box-shadow:1px 1px 3px rgba(20,20,20,.3);
    font-style:italic;
    text-shadow:1px 1px 3px #fff;
    display:block
    
}
a:hover {
    box-shadow: inset 0 0 3px #999;
    background:#e3e3e3;
     border-right: 2px solid #999;
    border-bottom: 2px solid #999;
}
a.inactive {
    opacity:.5;
}
a.inactive:hover {
    opacity:.5;
       box-shadow: inset 0 0 3px transparent;  
    border:1px solid transparent;
     border-right: 2px solid transparent;
    border-bottom: 2px solid transparent;
}