opacity button

by Peter Aad

HTML

<div class="my-btn">
    <span aria-hidden="true">whatever</span>
    <a href="#"><span class="sr-only">whatever</span></a>
</div>

CSS

.my-btn {
    position:relative;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
}

.my-btn > span {color:black;font-size: 14px;font-weight: 400;line-height: 1.2;}
.my-btn a{
    background-color: rgb(255,0,0); /* Will change at run time to anything */
    opacity:1;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    display:block;
    z-index:-1
}

.my-btn:hover a {
    background-color: rgb(255,0,0); /* I dont know what the rgb values will be */
    opacity:.5;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}