better software through user-centered design

Posts tagged ‘css buttons’

Rounded CSS Button Borders with Drop Shadow

Whew, it has been a long haul since I have been able to post.  I finally finished my BS degree in Web Design & Development! With that I am ready to update this bad boy far more frequently. Let us proceed shall we?

I could not find a satisfying solution on my good friend Google’s search on how to create CSS based buttons with gradient borders and drop shadows.  This code has not been tested thoroughly in each browser, and will likely only work in modern browsers using the :before pseudo element selector. That being said, this could certainly be expanded upon and extended further from what it is.

Link: <a href=”/dahshboard” class=”roundedButton” title=”Return to dashboard” data-text=”< Back to Dashboard”></a>

The link text be inserted within the anchor with our :before pseudo element.

Anchor CSS:

a[href].roundedButton{
background:#fff;
color:#5182a1;
font-weight:bold;
font-size:12px;
border-radius:20px;
padding:0px ;
box-shadow: -1px -1px 2px 2px #dfe3e4, 1px 1px 2px 2px #4d5759;
text-shadow:none;
}

This will provide the base for our linear gradient border, using box-shadow.  The reason we are not using border tags is I found box-shadow to be more flexible and far easier to implement than linear border gradients.

:before css:

a[href].roundedButton:before{
content: attr(data-text);
display:inline-block;
border-radius:20px;
line-height: 35px;
padding:0px 16px;
box-shadow: -1px -1px 2px 1px rgba(0,0,0,.1), 1px 1px 2px 1px rgba(0,0,0,.3);
}

This provides us with the rest of our gradient, as well as a drop shadow.

You can easily adjust and play with the styling depending on the affect you want (like a deeper drop shadow).

Have fun!

Advertisements
%d bloggers like this: