Centered Soldout Button

Centered Soldout Button

by David Avellan

HTML

<div style="text-align:center">
    <div id="soldout_btn" class="button-with-cc">
        <span id="btn_soldout1" class="css-button style-1">
            <span class="text">Reserve an Aug 16th Spot</span><span class="subtext">By Paying Here</span>
        </span>
         <div class="soldout1">
            <span class="soldout1text">SOLD OUT!</span>
        </div>
    </div>
</div>

CSS

/* Soldout Button Code */
.soldout1 {
    z-index:5;
    line-height:50px;
    -ms-transform: rotate(-15deg); 
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
    position:relative;
    top:-70px;
    left:5px;
    width: 155px; 
    height: 50px;
    box-shadow: -1px 1px 5px black;
    background: linear-gradient(to bottom, rgba(255,0,0,1) 0%, rgba(107,12,0,1) 48%, rgba(255,0,0,1) 100%);
    background: -webkit-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(107,12,0,1) 48%, rgba(255,0,0,1) 100%);
    background: -moz-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(107,12,0,1) 48%, rgba(255,0,0,1) 100%);
    background: -o-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(107,12,0,1) 48%, rgba(255,0,0,1) 100%);   
}

.soldout1text {
    font-family: Impact,Charcoal,sans-serif;
    text-align: center; 
    color: white; 
    font-size: 32px; 
    font-weight: bold;
}

#btn_soldout1 .text {
    font-size:21px;
    color:#fff;
    font-weight:bold;
    text-shadow:#000000 0px 1px 1px;
}

#btn_soldout1 .subtext {
    font-size:16px;
    color:#ffffff;
    font-weight:normal;
    text-shadow:#000000 0px 1px 1px;
}

#btn_soldout1 {
    padding:27px 35px;
    border-color:rgba(0,0,0,0.2);
    border-width:1px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    background:#F8AE02;
    box-shadow:1px 1px 5px 0px rgba(0,0,0,0.5);
}

#btn_soldout1 .gradient {
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
}

#btn_soldout1 .shine {
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
}

#btn_soldout1 .active {
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;}

#btn_soldout1 .hover {
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
}