Click here to Skip to main content
Licence 
First Posted 13 Jun 2005
Views 30,159
Bookmarked 23 times

fun with css part 1

By | 13 Jun 2005 | Article
spice up your <input /> fields

Sample Image - fun_with_css_part_1.jpg

Introduction

Well, I don't know about you but I can't stand those plain html buttons. Fortunately though there is a solution ;-)
Just create a .css file like the following

.niceButton
{ 
    <FONT color=red>padding</FONT>: <FONT color=blue>0px 4px 4px 4px;</FONT>
    <FONT color=red>font-size</FONT>: <FONT color=blue>8pt;</FONT> 
    <FONT color=red>font-family</FONT>: <FONT color=blue>Verdana;</FONT> 
    <FONT color=red>height</FONT>: <FONT color=blue>19px;</FONT> 
    <FONT color=red>filter</FONT>: <FONT color=blue>progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#dcdcdc, EndColorStr=#ffffff);</FONT>
    <FONT color=red>border-right</FONT>: <FONT color=blue>#7b9ebd 1px solid;</FONT>
    <FONT color=red>border-top</FONT>: <FONT color=blue>#7b9ebd 1px ridge;</FONT> 
    <FONT color=red>border-left</FONT>: <FONT color=blue>#7b9ebd 1px ridge;</FONT>
    <FONT color=red>border-bottom</FONT>: <FONT color=blue>#7b9ebd 1px ridge;</FONT>
} 

set the <input /> control's class property to the .css class created above

<input type="submit" name="Button" value="this is nice" id="Button" class="niceButton" />

and enjoy.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Daniel Walzenbach

Program Manager
Microsoft
United States United States

Member

Program Manager Visual Studio

Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board. (secure sign-in)
 
Search this forum  
 FAQ
    Noise  Layout  Per page   
  Refresh
GeneralProblems in IE PinmemberDewang Mehta16:32 14 Jul '07  
GeneralUsability PinsitebuilderUwe Keim19:42 13 Jun '05  
QuestionWhat about the fox!? Pinmemberoykica12:21 13 Jun '05  
AnswerRe: What about the fox!? PinmemberDaniel Walzenbach17:59 13 Jun '05  
GeneralRe: What about the fox!? Pinmemberoykica22:17 13 Jun '05  
I am aware that the gradient does not get applied in Firefox and that the BasicImage Filter is for IE only. That was essentially my point. I was suggesting that if the purpose of the button is to make things look better, yet in Firefox it looks worse than a normal button, it may not be suitable for all situations. Looks of course are a matter of opinion. Smile | :)
 
BTW, I think it does look good in IE. It would just be nicer if it looked good in Firefox as well, given that it is becoming more and more popular.
GeneralRe: What about the fox!? PinmemberDaniel Walzenbach0:19 14 Jun '05  
GeneralRe: What about the fox!? Pinmemberoykica3:27 14 Jun '05  

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Mobile
Web04 | 2.5.120528.1 | Last Updated 13 Jun 2005
Article Copyright 2005 by Daniel Walzenbach
Everything else Copyright © CodeProject, 1999-2012
Terms of Use
Layout: fixed | fluid