Soy bastante nuevo para Asp.net lo siento si esto es elemental. Estoy tratando de conseguir un control de botón de buscar de una manera determinada.

Estoy usando un archivo CSS que he usado antes de que mi estilo de las etiquetas de una manera determinada.

Si estoy usando un asp.net botón de control, ¿cómo puedo aplicar este estilo para el botón de control?

Traté de configuración CSSClass=’button’, pero que no funciona. Puse las etiquetas de mi asp.net botón de control, pero eso sólo hace que la asp.net estar dentro de mi estilizada botón.

Cualquier idea de lo que tengo que hacer?

Gracias por la ayuda.

/******************** 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;
}

Botón:

<asp:Button ID="LoginButton" runat="server"  CommandName="Login" 
Text="Log In" type="button"
ValidationGroup="mainLogin" onclick="LoginButton_Click" CSSClass='button'/>
  • ¿Sabe usted cómo el estilo de HTML normal botones?
InformationsquelleAutor Cineno28 | 2012-07-07

1 Comentario

  1. 1

    Después de investigar su CSS las líneas de abajo tiene el problema y la razón por la css no funciona para usted asp:button en CssClass

    button,
    .big-button {

    Debe utilizar css de esta manera

    .button,
    .big-button {

    así que el problema es que te perdiste período operador . antes de
    el botón,

    El selector de clase utiliza el código HTML atributo de clase, y se define con un «.» http://www.w3schools.com/css/css_id_class.asp

    • Gracias por tu ayuda. He intentado eso pero aún así no viene a través de exactamente correcto. El css estoy usando estaba trabajando para html «< botón>» etiquetas así que no estoy seguro de cómo se aplican a la asp.net control si yo simplemente no puede asignar como una clase
    • Favor de copiar/pegar asp.net código de formulario que contiene el botón y también el css
    • He añadido anteriormente. Gracias
    • Ugh! Que era tan obvio no puedo creer que me perdí. Muchas gracias por tu ayuda!

Dejar respuesta

Please enter your comment!
Please enter your name here