The Brave Programmer - Blogging and coding
Not for the faint hearted
 

Blog Posts From The Brave Programmer

Minimize

Stylish Buttons with CSS

Feb12

Written by:
2009/02/12 04:00 PM RssIcon

Today we will look at  how to create great stylish looking textual buttons using CSS styling.

Why do I write this when there are so many tutorials on this very subject. Well for one writing about a topic, helps me learn. Two, every body has a different spin on the topic or different style of writing. Three, I think its cool, and I do not want to go searching for this because I know it is right here on my blog. Four, maybe some have never heard of this or tried it out, now is your chance.

Using something like Dynamic buttons will save you loads of time which otherwise will be used creating graphics. It also increases the page load times, depending on the amount of buttons you have on the page. This is what it might look like. You would obviously change the styling to suite you particular site and needs.

DNN Dotnetnuke Search Engine Optimisation

 

 

We want our buttons to be super-flexible. That means we want the button to expand and shrink according to the text length of the button. For that, we'll use a method commonly termed as the sliding doors technique. Basically it is two complementing images creating the illusion of a single, stretching image.

Our button will be a basic < a> tag with a nested < span>, styling to make great looking buttons. Each tag containing a different slice of the background image. This is what the HTML might look like:

< a class="button" href="#">< span>Integralwebsolutions< /span>< /a>

We want our buttons to be flexible. That is they must have the ability to expand and shrink in accordance to the text length of the button. We will have to make the background image expand with the size of the button's text. To do this we will use a method called the sliding doors technique. Basically two complementing images creating the illusion of a single, stretching image.

We would need to create just two graphics. We need a normal state button, and a clicked state button We will include both states in a single image. To switch between normal and pressed state, we'll simply shift the background image vertically, revealing a different images for the alternate button state. We can use this CSS trick which allows us to perform the switch without the need for any JavaScript. The part of the image that will accommodate the button text will be set to a reasonable 300px, the height we'll set to 36px, or what ever you desire. I have just mirrored the button to give a different image. You might want to do something more fancy.

Dynmic CSS Buttons  Dynamic button

Styling

Next, we need to add some CSS so that we can make this whole thing work together. You can place the buttons anywhere and anyhow on your page. Using tables, divs, adding float properties. For this demo we have decided to float them by default. Also your image path will be different.

 

.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}

a.button {
background: transparent url('bg_button_a.gif') no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 25px;
margin-right: 6px;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}

a.button span {
background: transparent url('bg_button_span.gif') no-repeat;
display: block;
line-height: 25px;
padding: 5px 0 5px 18px;
}

 

Depending on your button size you might want to play around with the line height and padding. These should add up to the size of your button. Remember that it is only half of the graphic being used by for the button.

Now we need to add some mouse over movement and some click actions, so that it looks like the button is being depressed. The mouse over is the easy part. I'm sure many are familiar with that. For the click action we swap out the top and bottom image of our combined button graphic. We do this by just changing the position of the background graphic, from top to bottom. We do both the button and the span.

 

a.button:active {
background-position: bottom right;
color: #FFFFFF;
outline: none; /* hide dotted outline in Firefox */
}

 

a.button:active span {
background-position: bottom left;
padding: 6px 0 4px 18px; /* push text down 1px */
border:none;
}
a.button:hover {
color:#00FFFF;
}

 

Now I have tested this in both IE7 and Firefox 3. But as you know, no browser ever does things the same way. We always have difficulties. As it so happens IE does not return the button to its normal state whenever it's released. To force such behaviour, we need to add a tiny bit of JavaScript to the < a> tag. No problem just a small in-line javascript.

 

< a class="button" href="#" onclick=this.blur();"">

 

Hopefully this helps you in some way. Let me know if it was useful to you. Have you used something like this before? Let us know.

Tags:
Categories:
blog comments powered by Disqus
 
Blog Updates Via E-mail
 Blog Updates Via E-mail
Minimize

Do you want to receive blog updates via e-mail. Then just click on the link below. You will be redirected to Google's feed burner, where you can fill out a form. Supplying your e-mail address.

The subscription is managed entirely by Google's Feedburner. We cannot and do not collect your email address.

Subscribe to The Brave Programmer by Email

Print  
 

 

Latest Comments
 Latest Comments
Minimize
Powered by Disqus

Sign up with Disqus to enjoy a  surprise box of features

Print  
 
Blog Roll
 Blog Roll
Minimize
Print  
 
Categories
 Categories
Minimize
Print  
 
<h1>Search Blogs From The Brave Programmer</h1>
 

Search Blogs From The Brave Programmer

Minimize
Print  
 
Archive
 Archive
Minimize
Archive
<October 2017>
SunMonTueWedThuFriSat
24252627282930
1234567
891011121314
15161718192021
22232425262728
2930311234
Monthly
Go
Print  
 
<h1>News Feeds (RSS)</h1>
 

News Feeds (RSS)

Minimize
Print  
 

Follow robertbravery on Twitter

Blog Engage Blog Forum and Blogging Community, Free Blog Submissions and Blog Traffic, Blog Directory, Article Submissions, Blog Traffic

View Robert Bravery's profile on LinkedIn

Mybyte

 

Robert - Find me on Bloggers.com

Tags
 Tags
Minimize
Print  
 
Contact Us Now
 Contact Us Now
Minimize
 

Email  us now or call us on 082-413-1420,  to host your website.

We design and develop websites. We develop websites that make a difference. We do Dotnetnuke Module development.

Web Masters Around The World
Power By Ringsurf
Print