65.9K
CodeProject is changing. Read more.
Home

fun with css part 1

starIconstarIcon
emptyStarIcon
starIcon
emptyStarIconemptyStarIcon

2.82/5 (10 votes)

Jun 13, 2005

CPOL
viewsIcon

41370

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
{ 
    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

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

and enjoy.