Click here to Skip to main content
15,886,701 members
Articles / Web Development / HTML

fun with css part 1

Rate me:
Please Sign up or sign in to vote.
2.82/5 (10 votes)
13 Jun 2005CPOL 40.7K   24   7
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

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

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

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

and enjoy.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Program Manager Microsoft
United States United States
Program Manager Visual Studio

Comments and Discussions

 
GeneralProblems in IE Pin
Dewang Mehta14-Jul-07 16:32
Dewang Mehta14-Jul-07 16:32 
GeneralUsability Pin
Uwe Keim13-Jun-05 19:42
sitebuilderUwe Keim13-Jun-05 19:42 
QuestionWhat about the fox!? Pin
oykica13-Jun-05 12:21
oykica13-Jun-05 12:21 
AnswerRe: What about the fox!? Pin
Daniel Walzenbach13-Jun-05 17:59
Daniel Walzenbach13-Jun-05 17:59 
GeneralRe: What about the fox!? Pin
oykica13-Jun-05 22:17
oykica13-Jun-05 22:17 
GeneralRe: What about the fox!? Pin
Daniel Walzenbach14-Jun-05 0:19
Daniel Walzenbach14-Jun-05 0:19 
GeneralRe: What about the fox!? Pin
oykica14-Jun-05 3:27
oykica14-Jun-05 3:27 
I believe that Firefox follows the CSS standards very closely but that doesn't help much when it comes to effects. Sigh | :sigh: It looks like there is a possibility that CSS3 will introduce SVG and we will be able to do gradients all-round. Smile | :) Thanks for the article.

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

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