style button multiple same class

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

dotcom22

hello

I would like apply the same style to 3 different form buttons coming from 3 different components of my site.

Example:

.class1 .button {
background: url("../images/main/light/button-bg.png");
border: medium none;
border-radius: 3px 3px 3px 3px;
color: white;
}

.class2 .button {
background: url("../images/main/light/button-bg.png");
border: medium none;
border-radius: 3px 3px 3px 3px;
color: white;
}

.class3 .button {
background: url("../images/main/light/button-bg.png");
border: medium none;
border-radius: 3px 3px 3px 3px;
color: white;
}

I'm almost sure is possible to get the same result and avoid to write 3 time the same code...so I tried this:

.class1 .class2 .class3 .button {
background: url("../images/main/light/button-bg.png");
border: medium none;
border-radius: 3px 3px 3px 3px;
color: white;
}

and also this:

.class1, .class2, .class3, .button {
background: url("../images/main/light/button-bg.png");
border: medium none;
border-radius: 3px 3px 3px 3px;
color: white;
}

..but none of them work.

Somebody can suggest me the correct syntax please ?

Unfortunately I'm not a css guru

many thank

cheers

auntnini

At a quick glance, the property:values all look the same so you should just have one

.button {
background: url("../images/main/light/button-bg.png");
border: medium none;
border-radius: 3px 3px 3px 3px;
color: white;
}

You could have exceptions such as .class1 { color:red: } .class2 { color:green;} and apply multiple space-separated classes to one element, such as <div class="button class2"> ...</div>

You can contextually style nested elements #nav .button, #footer .button { } and apply same rule to comma-separated multiple selectors.

Here's an example

<STYLE tye="text/css">
#navbarContainer { margin: 10px auto; text-align:center; padding:0; border: none; position:relative; background:transparent; clear:both; }
/*==HORIZONTAL UL==*/
/*#navbarContainer img { width: 50&#37;; max-width: 400px; min-width: 250px;}*/
ul#navbar  { 
	white-space: nowrap; margin: 0; padding: 0; border: 0; font-size: .95em; line-height: 1.5em; font-style: italic; 
	font-family: Rockwell, "goudy old style", garamond, baskerville, "century schoolbook", goudy, georgia, "times new roman", times, serif;  }
ul#navbar li { 
	 float: left; display: inline; list-style: none; margin: 1px; padding:5px;  width: 6em; text-align: center; }

ul#navbar li a, ul#navbar li a:link, ul#navbar li a:visited  { 
	display: block; text-decoration: none; 	color: #000; background-color: #F0F8FF; border: 2px outset #fc0; -moz-border-radius: 1em; border-radius:1em; width: 100%;  } /*==problemw/Mac==*/

ul#navbar li a:hover, ul#navbar li a:active  {   

	display: block; text-decoration: none; 	color: #8899aa; background-color: #cccccc; border: 2px inset #f00; 
	}	

ul#navbar li.here a,  ul#navbar li.here a:link, ul#navbar li.here a:visited  { 
	color: #00FFCC; background-color: #cccccc; border: 2px inset #c60; cursor: default; 	} 
</STYLE>

IN HTML
 <div id="navbarContainer"> 
 <ul id="navbar">
    <li id="home"><a href="../index.html">Home</a></li>
    <li id="office" class="here"><a href="#nogo">Office</a></li>
     <li id="staff"><a href="../staff/index.html">Staff</a></li>
</ul>
</div>

dotcom22

of course you right

Setting simply my .button class is quite enough in my case..

many thank for your help.

All the best

cheers