Trendy Retro Button

by meetaaronsilber

HTML

<a href="#" class="retroblock">This Month</a>

CSS

.retroblock {
    position: relative;
    
    padding: 5px 10px;
    border: 1px solid #000;
    color: #fff;
    text-decoration: none;
    
    font-family: Century Gothic;
    text-decoration: none;
    text-transform: uppercase;
    
    background: transparent;
}

    .retroblock:after {
        content: '';
    
        position: absolute;
        z-index: -1;
        top: 0px;
        left: 0px;
        background: #88120D;
        border: 1px solid #fff;
        width: 100%;
        height: 100%;
    }

    .retroblock:before{
        content: '';
    
        position: absolute;
        z-index: -2;
        top: 2px;
        left: 2px;
    
        width: 100%;
        height: 100%;    
        padding: 3px 3px;
    
        /* Safari 4+, Chrome 1+ */
        background-image:
            -webkit-gradient(
                linear,
                0 100%,
                100% 0,
                color-stop(.25, black),
                color-stop(.25, transparent),
                color-stop(.5, transparent),
                color-stop(.5, black),
                color-stop(.75, black),
                color-stop(.75, transparent),
                to(transparent)); 
    
        background-size: 4px 4px;
    }

.retroblock:hover::after {
    background: #B20839;   
}

.retroblock:active{
    top: 5px;
    left: 5px;
}

    .retroblock:active::before {
        top: 3px;
        left: 3px;
        padding: 0px 0px;
    }