Styling an asp.net button - asp.net

Question

I'm pretty new to Asp.net so sorry if this is elementary. I'm trying to get a button control to look a certain way.
I'm using a CSS file I used before that would style my tags a certain way.
If I'm using an asp.net button control, how can I apply this style to the button control?
I tried setting CSSClass='button' but that doesn't work. I put the tags around my asp.net button control, but that just makes the asp.net be inside of my stylized button.
Any ideas what I need to do?
Thanks for any help.
/******************** Button ********************/
button,
.big-button {
display: inline-block;
border: 1px solid;
border-color: #50a3c8 #297cb4 #083f6f;
background: #0c5fa5 url(../images/old-browsers-bg/button-element-bg.png) repeat-x left top;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
background: -moz-linear-gradient(
top,
white,
#72c6e4 4%,
#0c5fa5
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(white),
to(#0c5fa5),
color-stop(0.03, #72c6e4)
);
-moz-border-radius: 0.333em;
-webkit-border-radius: 0.333em;
-webkit-background-clip: padding-box;
border-radius: 0.333em;
color: white;
-moz-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
-webkit-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
font-size: 1.167em;
padding: 0.286em 1em 0.357em;
line-height: 1.429em;
cursor: pointer;
font-weight: bold;
}
/* IE class */
.ie button {
overflow: visible;
}
/* IE class */
.ie7 button {
padding-top: 0.357em;
padding-bottom: 0.214em;
line-height: 1.143em;
}
button img,
.big-button img {
margin-bottom: -3px;
}
button:hover,
.big-button:hover {
border-color: #1eafdc #1193d5 #035592;
background: #057fdb url(../images/old-browsers-bg/button-element-hover-bg.png) repeat-x left top;
background: -moz-linear-gradient(
top,
white,
#2bcef3 4%,
#057fdb
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(white),
to(#057fdb),
color-stop(0.03, #2bcef3)
);
}
button:active,
.big-button:active {
border-color: #5b848b #b2def1 #b2def1 #68a6ba;
background: #3dbfed url(../images/old-browsers-bg/button-element-active-bg.png) repeat-x top;
background: -moz-linear-gradient(
top,
#89e7f9,
#3dbfed
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(#89e7f9),
to(#3dbfed)
);
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
button.red,
.red button,
.big-button.red,
.red .big-button {
color: white;
border-color: #bf3636 #5d0000 #0a0000;
background: #790000 url(../images/old-browsers-bg/button-element-red-bg.png) repeat-x top;
background: -moz-linear-gradient(
top,
white,
#ca3535 4%,
#790000
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(white),
to(#790000),
color-stop(0.03, #ca3535)
);
}
button.red:hover,
.red button:hover,
.big-button.red:hover,
.red .big-button:hover {
border-color: #c24949 #9d3d3d #590909;
background: #9d0404 url(../images/old-browsers-bg/button-element-red-hover-bg.png) repeat-x top;
background: -moz-linear-gradient(
top,
white,
#fe6565 4%,
#9d0404
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(white),
to(#9d0404),
color-stop(0.03, #fe6565)
);
}
button.red:active,
.red button:active,
.big-button.red:active,
.red .big-button:active {
border-color: #7c5656 #f7cbcb #f7cbcb #a15151;
background: #ff5252 url(../images/old-browsers-bg/button-element-red-active-bg.png) repeat-x top;
background: -moz-linear-gradient(
top,
#ff9d9d,
#ff5252
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(#ff9d9d),
to(#ff5252)
);
}
button:disabled,
button:disabled:hover,
.big-button.disabled,
.big-button.disabled:hover {
color: #bfbfbf;
border-color: #e9f2f6 #c4c3c3 #a2a2a2 #e3e2e2;
background: #c8c8c8 url(../images/old-browsers-bg/button-element-disabled-bg.png) repeat-x top;
background: -moz-linear-gradient(
top,
#f0f2f2,
#c8c8c8
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(#f0f2f2),
to(#c8c8c8)
);
-moz-text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75);
-webkit-text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75);
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
cursor: auto;
}
/* IE class */
button.disabled,
button.disabled:hover {
color: #bfbfbf;
border-color: #e9f2f6 #c4c3c3 #a2a2a2 #e3e2e2;
background: #c8c8c8 url(../images/old-browsers-bg/button-element-disabled-bg.png) repeat-x top;
cursor: auto;
}
button.grey,
.big-button.grey {
color: white;
border-color: #a1a7ae #909498 #6b7076;
background: #9fa7b0 url(../images/old-browsers-bg/button-element-grey-bg.png) repeat-x top;
background: -moz-linear-gradient(
top,
white,
#c5cbce 5%,
#9fa7b0
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(white),
to(#9fa7b0),
color-stop(0.05, #c5cbce)
);
-moz-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-webkit-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
button.grey:hover,
.big-button.grey:hover {
border-color: #a1a7b0 #939798 #6e7275;
background: #b1b5ba url(../images/old-browsers-bg/button-element-grey-hover-bg.png) repeat-x top;
background: -moz-linear-gradient(
top,
white,
#d6dadc 4%,
#b1b5ba
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(white),
to(#b1b5ba),
color-stop(0.03, #d6dadc)
);
}
button.grey:active
.big-button.grey:active {
border-color: #666666 #ffffff #ffffff #979898;
background: #dddddd url(../images/old-browsers-bg/button-element-grey-active-bg.png) repeat-x top;
background: -moz-linear-gradient(
top,
#f1f1f1,
#dddddd
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(#f1f1f1),
to(#dddddd)
);
}
button.small,
.big-button.small {
font-size: 0.833em;
padding: 0.2em 0.3em 0.3em 0.2em;
vertical-align: 0.2em;
}
/* IE class */
.ie button.small {
padding: 0.5em 0.3em;
vertical-align: 0.1em;
}
.ie7 button + button {
margin-left: 0.25em;
}
Button:
<asp:Button ID="LoginButton" runat="server" CommandName="Login"
Text="Log In" type="button"
ValidationGroup="mainLogin" onclick="LoginButton_Click" CSSClass='button'/>

Answer 1

After investigating your CSS the lines below have the issue and the reason for css not working for you asp:button in CssClass
button,
.big-button {
You must use css this way
.button,
.big-button {
so the issue is that you missed period operator . before
the button,
The class selector uses the HTML class attribute, and is defined with a "." http://www.w3schools.com/css/css_id_class.asp