A few examples of what can be achieved with CSS and form buttons.

 

Form Button Examples Code

  Basic Button

/* Basic Text Box */
.tb1 {
	No code needed for this text box!
}

  Font Color

/* Font Color */
.fb2 {
	color:#800000;
}

  Background Color

/* Background Color */
.fb3 {
	background-color:#FF6633;
}

  Gradient Background

/* Gradient Background */
.fb4 {
    background: #FFBD2B url('images/gradient.png') repeat-x;
    border: 1px solid #bfa277;
}

Right click to Save Images

Image

  Hover Button 1

/* Hover Button 1 */
.fb5 {
	background-color: #db6600;
	padding-left:6px;
	padding-right:6px;
	padding-top:3px;
	padding-bottom:3px;	
	color: #ffffff;
	border:1px solid #db6600;
	background-image: url(images/button_bg.jpg);
}
.fb5:hover {
	background-color: #000000;	
	border:1px solid #000000;
	background-image: url(images/button_bg_over.jpg);
}

Right click to Save Images

Image 1 | Image 2

  Hover Button 2

/* Hover Button 2 */
.fb9 {
	border: 1px solid #3366FF;
	background-color:#B3C6FF;
}
.fb9:hover {
	border: 2px dotted #FF6633;
	color:#FF6600;
	font-weight:bold;
}

  Double Border

/* Double Border */
.fb6 {
	border: 3px double #003DF5;
}

  Image Button

/* Image Button */
.fb7 {
    background: #EBE3CD url(images/search.png) no-repeat 5px center;
    vertical-align:middle; 
    border: 1px solid #969184;
}

Right click to Save Images

Image

  Rounded Corners

/* Rounded Corners */
.fb8 {
	border: 2px solid #777;
	border-radius: 10px;
	outline: none;
}


Last updated on 6th April 2014 By Rene Spronk