Holding page
Working on the holding page for a new site, using an illustration the client sent over as the background. Buttons are all CSS. Used an inset shadow for the little glow at the top. Here's the code:
button {
background: #333; /*old browser fallback*/
background: -moz-linear-gradient(top, #666, #333);
-moz-box-shadow:0px 1px 1px rgba(250, 250, 250, 0.4) inset;
-moz-border-radius: 0.7em;
border:1px solid #444444;
opacity:0.8; /*shows some of the background through*/
text-shadow:1px 1px 0 rgba(250, 250, 250, 0.2);
}
button:hover,
button:focus,
button:active {
cursor: pointer;
opacity:1;
}
input[type=email] {
background-color: #FFFCFC;
-moz-box-shadow:1px 1px 3px #DDDDDD inset;
opacity:0.6;
border:1px solid #CCCCCC;
}
input[type=email]:focus {
opacity:0.8; /*makes it more opaque on focus*/
-moz-box-shadow: 0 0 8px #3C72AC; /*adds a glow*/
}
(Don't forget the other browser prefixes)