CCleaner CSS3 Button

The CCleaner download button in css3

by James Doyle

HTML

<div class="button">
    <div class="inside">
        <a>Download</a>
    </div>
</div>

CSS

.button {
    margin: 20px;
    padding: 5px;
    height: 100px;
    width: 300px;
    background: #666;
    border: 1px solid #000;
    border-radius: 10px;
    box-shadow: inset 2px 2px 10px #333;
}

.button .inside {
    cursor: pointer;
    float: left;
    margin: 3%;
    height: 80%;
    width: 93%;
    border-radius: 7px;
    text-align: center;
    border: 1px solid #333;
    background: hsl(32, 100%, 50%);
    box-shadow: 1px 1px 10px #000, inset 0px 2px 5px hsl(32, 100%, 75%), inset 0px -1px 10px 0px hsl(32, 100%, 30%);
}

.button .inside a {
    margin-top: 4%;
    display: block;
    font-size: 3em;
    font-weight: bold;
    font-family: Helvetica, Arial, sans-serif;
    color: #fff;
    text-shadow: 2px 2px hsl(32, 100%, 35%);
}

.button .inside:hover {
    border: 1px solid #000;
}

.button .inside:active {
    background: hsl(32, 100%, 50%);
    box-shadow: 1px 1px 10px #000, inset 0px 2px 5px hsl(32, 100%, 30%), inset 0px -1px 10px 0px hsl(32, 100%, 75%);
}

.button .inside:active a{
    margin-top: 5%;
    
}