PDA

View Full Version : CSS buttons, is there an easier way


urbanrays
10-14-2009, 10:01 AM
Hi

I have a feeling there is an easier way to do this but not to sure.

I am creating 5 buttons, and each button has a 4px top border, each border for each button is a different colour and when you hover the colour of the border covers the whole button.

The code for the buttons is as follows

.butt1 a:link {
margin: 0px 0px 0px 30px;
padding: 0px;
float: left;
height: 26px;
width: 133px;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #A40F1E;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
display: block;
text-align: center;
vertical-align: 50%;
line-height: 26px;
}
.butt1 a:visited {
margin: 0px 0px 0px 30px;
padding: 0px;
float: left;
height: 26px;
width: 133px;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #A40F1E;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
display: block;
text-align: center;
vertical-align: 50%;
line-height: 26px;
}
.butt1 a:hover {
margin: 0px 0px 0px 30px;
padding: 0px;
float: left;
height: 26px;
width: 133px;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #A40F1E;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #000000;
text-decoration: none;
background-color: #A40F1E;
display: block;
text-align: center;
vertical-align: 50%;
line-height: 26px;
}
.butt1 a:active {
margin: 0px 0px 0px 30px;
padding: 0px;
float: left;
height: 26px;
width: 133px;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #A40F1E;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
display: block;
text-align: center;
vertical-align: 50%;
line-height: 26px;
}
.butt2 a:link {
margin: 0px 0px 0px 30px;
padding: 0px;
float: left;
height: 26px;
width: 133px;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #FF6600;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
display: block;
text-align: center;
vertical-align: 50%;
line-height: 26px;
}
.butt2 a:visited {
margin: 0px 0px 0px 30px;
padding: 0px;
float: left;
height: 26px;
width: 133px;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #FF6600;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
display: block;
text-align: center;
vertical-align: 50%;
line-height: 26px;
}
.butt2 a:hover {
margin: 0px 0px 0px 30px;
padding: 0px;
float: left;
height: 26px;
width: 133px;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #FF6600;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #000000;
text-decoration: none;
background-color: #FF6600;
display: block;
text-align: center;
vertical-align: 50%;
line-height: 26px;
}
.butt2 a:active {
margin: 0px 0px 0px 30px;
padding: 0px;
float: left;
height: 26px;
width: 133px;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #FF6600;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
display: block;
text-align: center;
vertical-align: 50%;
line-height: 26px;
}

Is there a way of reducing this code, or does it not really matter.

Thanks for your help peeps

Corrosive
10-14-2009, 10:14 AM
Hi

I have a feeling there is an easier way to do this but not to sure.

I am creating 5 buttons, and each button has a 4px top border, each border for each button is a different colour and when you hover the colour of the border covers the whole button.

The code for the buttons is as follows

.butt1 a:link {
margin: 0px 0px 0px 30px;
padding: 0px;
float: left;
height: 26px;
width: 133px;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #A40F1E;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
display: block;
text-align: center;
vertical-align: 50%;
line-height: 26px;
}
.butt1 a:visited {
margin: 0px 0px 0px 30px;
padding: 0px;
float: left;
height: 26px;
width: 133px;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #A40F1E;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
display: block;
text-align: center;
vertical-align: 50%;
line-height: 26px;
}
.butt1 a:hover {
margin: 0px 0px 0px 30px;
padding: 0px;
float: left;
height: 26px;
width: 133px;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #A40F1E;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #000000;
text-decoration: none;
background-color: #A40F1E;
display: block;
text-align: center;
vertical-align: 50%;
line-height: 26px;
}
.butt1 a:active {
margin: 0px 0px 0px 30px;
padding: 0px;
float: left;
height: 26px;
width: 133px;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #A40F1E;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
display: block;
text-align: center;
vertical-align: 50%;
line-height: 26px;
}
.butt2 a:link {
margin: 0px 0px 0px 30px;
padding: 0px;
float: left;
height: 26px;
width: 133px;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #FF6600;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
display: block;
text-align: center;
vertical-align: 50%;
line-height: 26px;
}
.butt2 a:visited {
margin: 0px 0px 0px 30px;
padding: 0px;
float: left;
height: 26px;
width: 133px;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #FF6600;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
display: block;
text-align: center;
vertical-align: 50%;
line-height: 26px;
}
.butt2 a:hover {
margin: 0px 0px 0px 30px;
padding: 0px;
float: left;
height: 26px;
width: 133px;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #FF6600;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #000000;
text-decoration: none;
background-color: #FF6600;
display: block;
text-align: center;
vertical-align: 50%;
line-height: 26px;
}
.butt2 a:active {
margin: 0px 0px 0px 30px;
padding: 0px;
float: left;
height: 26px;
width: 133px;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #FF6600;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
display: block;
text-align: center;
vertical-align: 50%;
line-height: 26px;
}

Is there a way of reducing this code, or does it not really matter.

Thanks for your help peeps

You could 'shorthand' a lot of it...

http://corrosiveonline.co.uk/tutorials_css_shorthand.php

urbanrays
10-14-2009, 10:23 AM
So before I go rushing in, is this about right

.butt1 a:link a:visited a:active{
margin: 0px 0px 0px 30px;
padding: 0px;
float: left;
height: 26px;
width: 133px;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #A40F1E;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
display: block;
text-align: center;
vertical-align: 50%;
line-height: 26px;
}
.butt1 a:hover{
margin: 0px 0px 0px 30px;
padding: 0px;
float: left;
height: 26px;
width: 133px;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #A40F1E;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #000000;
text-decoration: none;
background-color: #A40F1E;
display: block;
text-align: center;
vertical-align: 50%;
line-height: 26px;
}



If this is about right....2 questions
Do I need commas or whatever between
.butt1 a: link a:visited etc

And I thought these had to be in order
ie
a:link
a:visited
a:hover
a:active
Cheers

domedia
10-14-2009, 03:45 PM
The comma can be in there depending if that is really what you want.

element1 element2 {}
This will select element2 when it is a inside element1

element1, element2 {}
Will select both element1 and element2

Without seeing your markup (link?) it's pretty must guessing what you're trying to do though..

urbanrays
10-14-2009, 07:43 PM
Here you go

www.signofbeauty.co.uk (http://www.signofbeauty.co.uk)

domedia
10-15-2009, 04:52 PM
Yes, there's some weird CSS code here. :)
A general observation is that you're adding a DIV around your nav items that has no style to them. It's just extra code you do not need. You can just remove them and add an ID and/or class to each nav item instead.
Put all the code that is shared by the nav items in the class. No reason to repeat the same code multiple times in the stylesheet.

You're floating some block elements that are part of the mai structure, like #nav. There is nothing you're floating #nav next to so I wonder why it is there. If you feel up for it, you could probably try making the nav list a UL/LI list instead. Semantically it should make a little more sense.

Setting margin/padding to 0 on elements that has this by default, like DIV's, is not needed either.