Applying CSS style to buttons and HTML links
Applying CSS style to buttons and HTML links
In this article we are going to decorate buttons by using a small piece of CSS
on it.
while design CSS enable forms Applying CSS style to buttons is play a vital
role. its improve your sites beauty that give pleasure to the senses.
This article gives more idea to biginner to change/modify normal look of button
by Using Cascaded style sheets.
Click here to see Live example:
While thinking about CSS for buttons you have to take case of some CSS
properties and they are:
background: This is a shortcut attribute that lets you set up to five separate
(but related) background-style attributes in one attribute statement. Values can
be in any order, each one delimited by a space.
border: This is a shorthand attribute for setting the width, style, and/or color
of all four borders around an element in one assignment statement.
color: Defines the foreground text color of the element.
padding: This is a shortcut attribute that can set the padding widths of up
to four edges of an element with one statement. Padding is space that extends
around the content box of an element up to but not including any border that may
be specified for the element.
font: This is a shorthand attribute that lets you set multiple font-related
attributes with one assignment statement.
Simple CSS Button
Now we will define class which will change default look of button. See below
piece of code:
.frm_btn1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #164BA0;
background-color: #D1D1D1;
border: 1px solid #83AAD3;
}
.frm_btn2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #161616;
background-color: #D1D1D1;
border: 1px solid #83AAD3;
}
.frm_btn3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FF0000;
background-color: #D1D1D1;
border: 1px solid #83AAD3;
}
.frm_btn4 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #0000FF;
background-color: #D1D1D1;
border: 1px solid #83AAD3;
}
.frm_btn5 {
background:#DDEECE;
border:1px solid #ABCF19;
color:#333;
padding:2px;
font: 13px ‘Trebuchet MS’
}
.frm_btn6 {
background:#DDEECE;
border:1px solid #ABCF19;
color:#333;
padding:2px;
font: 13px ‘Lucida Sans Unicode’
}
.frm_btn7 {
background:#fc6;
border:2px solid #f93;
color:#333;
font-size:13px;
}
.frm_btn8 {
background:#fc6;
border:2px solid #f93;
color:#fff;
font-size:13px;
}
</style>
CSS Button with Background Image
This class use image as background to change default look of button. See below
piece of code:
.button {
padding: 2px 5px;
border: 1px solid #333333;
background: #666666 url(‘images/but-bg.gif’) repeat-x 50% top;
color: #FFFFFF;
}
.button1 {
padding: 2px 2px;
border: 1px #72C80B solid;
background: #72C80B url(‘images/button_bk.jpg’) repeat-x 50% top;
color: #FFFFFF;
font-weight:bold;
}
</style>
Convert Links To buttons
We are going to design a class which will conver html link into button means it
will change its look like a HTML button.
.btnRSS{
background-color: #ff6600;
border: 1px #ff6600 outset;
padding: 0 2px;
color: white;
text-decoration: none;
font: bold 10px Verdana;
}
.btnRSS:visited, .btnRSS:active{
color: white;
}
.btnRSS:hover{
color: black;
}
.btnLink{
background-color: #e3f48e;
border: 2px #d1ec4c outset;
padding: 1px 4px;
color: black;
text-decoration: none;
font: bold 90% “Lucida Grande”, “Trebuchet MS”, Verdana, Helvetica, sans-serif;
}
.btnLink:visited{
color: black;
}
.btnLink:hover{
border:2px #000000 dotted;
background-color: #d1ec4c;
padding: 1px 4px;
}
.btnLink:active{
color: black;
}
</style>
Download
Great guide!
Thanks, Chetankumar!
Great tutorial man thanks!
[…] To view this tutorial, click this link: http://www.tech-funda.com/?p=27 […]
Add A Comment