Transparent Button, with Gloss

This button is transparent, so the background image shows through. However it still has nice gloss. Straight out of photoshop without PNGs

by kizer

HTML

<li class="action action-download action-active">
    <a href="#" class="action-a">Get the app</a> 
</li>

<div class="moment-block">
    <h1>Sign in @ Handl</h1>
    <ul class="field-set fields-set-stacked login">
        <li class="field field-text">
            <label for="login_field"></label>
            <input type="email" class="input-text large" placeholder="email" name="login" id="login_field">
        </li>
        <li class="field">
            <label for="password_field"></label>
            <input type="password" class="input-password large submit" name="password" id="password_field" placeholder="password"><div class="click-target"></div>
        </li>
    </ul>            
</div>


<div class="moment-block" style="top: 120px;">
    <h1 style="float: left; margin-left: 60px;">Sign in @ Handl</h1>
    <ul class="field-set fields-set-stacked login">
        <li class="field field-text">
            <label for="login_field"></label>
            <input type="email" class="input-text large" placeholder="Welcome back, Court Kizer" name="login" id="login_field" style="-webkit-appearance: none; background: transparent; border: none;">
        </li>
        <li class="field">
            <label for="password_field"></label>
            <input type="password" class="input-password large submit" name="password" id="password_field" placeholder="password"><div class="click-target"></div>
        </li>
    </ul>            
</div>

CSS

html, body {
color: #333;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
font-weight: normal;
line-height: 18px;
margin: 20px;
background-image: url('https://s3-us-west-1.amazonaws.com/images.path.com/photos2/45cd3356-7eb0-43ae-a648-a9a5d2cfbd03/web.jpg');
    background-size: cover;
background-position: 50% 50%;
        background-attachment: fixed;

}

li, ol, ul {
list-style: none;
}

.action-active {
border-color: rgba(255, 255, 255, 0.29)!important;
overflow: visible;
}

.action {
background: rgba(0, 0, 0, 0.15);
border: 4px solid rgba(255, 255, 255, 0.1);
-moz-border-radius: 24px;
-webkit-border-radius: 24px;
border-radius: 24px;
float: left;
height: 41px;
overflow: hidden;
position: relative;
margin-left: 10px;
-webkit-transition: .2s ease-in border;
-moz-transition: .2s ease-in border;
-ms-transition: .2s ease-in border;
-o-transition: .2s ease-in border;
transition: .2s ease-in border;
}

.action-a {
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.48,rgba(255, 255, 255, 0)),color-stop(0.52,rgba(255, 255, 255, 0.1)));
background-image: -webkit-linear-gradient(bottom,rgba(255, 255, 255, 0) 48%,rgba(255, 255, 255, 0.1) 52%);
background-image: -moz-linear-gradient(bottom,rgba(255, 255, 255, 0) 48%,rgba(255, 255, 255, 0.1) 52%);
background-image: -ms-linear-gradient(bottom,rgba(255, 255, 255, 0) 48%,rgba(255, 255, 255, 0.1) 52%);
background-image: -o-linear-gradient(bottom,rgba(255, 255, 255, 0) 48%,rgba(255, 255, 255, 0.1) 52%);
background-image: linear-gradient(bottom,rgba(255, 255, 255, 0) 48%,rgba(255, 255, 255, 0.1) 52%);
border: 1px solid rgba(0, 0, 0, 0.3);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),0 1px 0 rgba(255, 255, 255, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),0 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 0...