August 3, 2009
Sexy buttons with CSS (a minor improvement)
By: William Levins
All praise and honors for this technique fall upon the originator, Alex Griffioen, and an excellent tutorial can be found on this site (sexy CSS button tutorial). My improvement addresses a specific issue using this technique to replace a submit button on forms.
The problem occurs with Internet Explorer (IE) and also with some PHP scripts. In both scenarios, when the sexy css button is clicked to submit the form, both IE and PHP scripts might not recognize a submit button has been pressed.
Under IE, this became a problem when I used the sexy css button technique on a log-in or registration form. IE would fail to prompt a user to "save their username and password." It just wouldn't recognize that the form had been submitted in this regard. Sure, some javascript could get the form to submit and function...but the user never received the prompt to save their credentials...and some became annoyed.
And with PHP, if you're submitting the form to the same page, and you want to use code to confirm the submit button was pressed (i.e., if(isset($_POST['submit']))) it would fail, since it didn't recognize the submit button event.
So to create a workable solution, I combined the sexy CSS button technique with a solution often used on file upload buttons. I actually hide an invisible submit button on top of my sexy css button. By doing this, with a combination of CSS and standard form tags, I'm able to maintain my sexy button look and ease of modification, but I still trigger the submit button. Since in reality, when you press the button...you're actually pressing an invisible submit button.
First, review the original Sexy CSS Button Technique.
The original CSS uses a standard a href tag and a span tag to create the sliding effect. And the single combined background image is repositioned on mouseover to simulate a changed state (or depress).
A recap on the original (slightly modified to suit our website):
The CSS:
a.newButton {
background: transparent url('/_common/bg_admin_button_a.png') no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}
a.newButton span {
background: transparent url('/_common/bg_admin_button_span.png') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
a.newButton:hover, a.newButton:active {
background-position: bottom right;
color: #FFF;
outline: none; /* hide dotted outline in Firefox */
}
a.newButton:hover span, a.newButton:active span {
background-position: bottom left;
padding: 6px 0 4px 18px; /* push text down 1px */
}
The images we're using on the span and a tags:
And the result:
This works great, unless we're trying to submit a form.
To solve the form submit issue, as described above. We've modified the sexy css button code and apply it to a form label tag and a span tag. Then we absolute position an invisible submit button above our sexy css button.
The CSS:
label.button {
background: transparent url('/_common/bg_admin_button_a.png') no-repeat scroll top right;
color: #000;
display: block;
float: left;
margin-right: 6px;
padding-right: 18px;
font: normal 12px Arial, Helvetica, sans-serif;
height: 24px;
}
label.button span {
display: block;
background: transparent url('/_common/bg_admin_button_span.png') no-repeat;
line-height: 14px;
padding: 5px 0 5px 18px;
white-space: nowrap;
text-align: center;
}
/* hide actual button input */
label.button input {
position: absolute;
width: inherit;
height: inherit;
z-index: 2;
opacity: 0;
-moz-opacity:0 ;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 first */
filter:alpha(opacity: 0); /* IE5-IE7 second */
}
label.button:hover, label.button:active {
background-position: bottom right;
color: #000;
outline: none; /* hide dotted outline in Firefox */
}
label.button:hover span, label.button:active span {
background-position: bottom left;
padding: 6px 0 4px 18px; /* push text down 1px */
}
The images (the same):
The result:
The technique has been tested and works under Internet Explorer (IE6, IE7, IE8). And it does work when using PHP, and if time permits, I'll eventually provide a demonstration using PHP.
With this addendum to the original sexy css button technique, you can maintain your sexy button style and keep all button text easily modifiable, and still trigger form submit recognition under IE and when using PHP.
And yes, we know we're not using the updated technique on our own site....but we will eventually.
- Advertising (35)
- Art (8)
- Branding (34)
- Business (62)
- Cascading Style Sheets CSS (3)
- Cats (4)
- Cocktail Recipes (2)
- Color Theory (6)
- Direct Mail (1)
- Going Green (9)
- Graphic Design (66)
- Illustration (4)
- Interior Design (2)
- jldcreative (19)
- Logos (6)
- Marketing (38)
- Miscellaneous Thoughts (113)
- Packaging Design (13)
- Photography (5)
- Sales (5)
- Search Engine Optimization (4)
- Social Networking (9)
- Technology (23)
- Typography (6)
- Viral Marketing (8)
- Web Design (20)
4/13/2010 2:51:23 AM
a
a
3/10/2010 5:21:35 AM
surfer
About my last comment, realised that display: none doesn''t work as it completely hides the submit button from the flow of the page so you can''t click it.
Found solution here that definitely works for IE8 for sliding doors image buttons ( in the following post see Tim Sheiner''s on second comment 12/02 which works) -
http: //www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/
3/5/2010 11:10:35 AM
surfer
Thanks for this solution. I have been searching for ages and this is the only one that works for an input button in IE8! ! It stops it shifting 1px on click and messing up the sliding doors images.
The only thing is the opacity classes in css aren''t valid in 2.1. So I have changed this in my css to display: none and this still hides the submit button in all browsers and is valid css.
12/7/2009 1:20:02 PM
Bill
I would wrap the fieldset element inside another DIV with a fixed width:100px and margin: 0 auto to center the div.
Then adjust accordingly to suit your layout.
12/6/2009 12:13:37 PM
Yalda
Hi
Great job
just one question how do you get to center this i have hard time placing it in the center b/c of float: left it always end up in left side
thanks again
8/17/2009 2:44:02 PM
Alfie M.
This rocks! Solves a problem I was having. Thanks.
Comment Now
