Foros del Web » Creando para Internet » HTML »

Agregar estilo a un boton.

Estas en el tema de Agregar estilo a un boton. en el foro de HTML en Foros del Web. Bueno gente, soy bastante nuevo con el tema de estilos. Nunca me dedique a esto y bueno ahora tengo que aprender un poco. De paso, ...
  #1 (permalink)  
Antiguo 03/11/2011, 10:40
 
Fecha de Ingreso: febrero-2008
Mensajes: 42
Antigüedad: 16 años, 1 mes
Puntos: 0
Agregar estilo a un boton.

Bueno gente, soy bastante nuevo con el tema de estilos. Nunca me dedique a esto y bueno ahora tengo que aprender un poco. De paso, si saben de algun buen tutorial de css y html se les agradece que me lo recomienden. Por lo pronto, eh logrado hacer todo lo que me he propuesto. Pero ahora me surgio una duda:

Tengo dos archivos, uno sin estilos:
Código:
<html>
  <head><title>Authentication Test Application</title></head>
  <body>
    <h1>Please enter user credentials:</h1>
    <form:form modelAttribute="loginData">
      <table>
        <tr>
          <td>Domain</td>
          <td><form:input path="domain"/></td>
        </tr>
        <tr>
          <td>Username</td>
          <td><form:input path="username"/></td>
        </tr>
        <tr>
          <td>Password</td>
          <td><form:password path="password"/></td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="submit" value="Log In" />
          </td>
        </tr>
      </table>
    </form:form>
  </body>
</html>
Y este con estilo:
Código:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Login Box HTML Code - www.PSDGraphics.com</title>
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/login-box.css"/>
</head>  

	<body>
	<div style="padding: 100px 0 0 250px;">
	<div id="login-box">
	<H2>Login</H2>
	Lorem Ipsum is simply dummy text of the printing and typesetting industry.
	<br />
	<br />
	<div id="login-box-name" style="margin-top:20px;">Email:</div><div id="login-box-field" style="margin-top:20px;"><input name="q" class="form-login" title="Username" value="" size="30" maxlength="2048" /></div>
		<div id="login-box-name">Password:</div><div id="login-box-field"><input name="q" type="password" class="form-login" title="Password" value="" size="30" maxlength="2048" /></div>
			<br />
			<span class="login-box-options"><input type="checkbox" name="1" value="1"> Remember Me <a href="#" style="margin-left:30px;">Forgot password?</a></span>
			<br />
			<br />
			<a href="#"><img src="${pageContext.request.contextPath}/static/images/login-btn.png" width="103" height="42" style="margin-left:90px;" /></a>
		</div>
	</div>
	</body>
</html>
Bueno, mi intencion es agregarle el estilo del segundo al primero. Esto es lo que he hecho:

Código:
<html>
  <head>
    <title>Authentication Test Application</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/login-box.css"/>
  </head>
  <body>
    <div style="padding: 100px 0 0 250px;">
	<div id="login-box">
	<H2>Login</H2>
    <form:form modelAttribute="loginData">
		<div id="login-box-name" style="margin-top:20px;">Domain:</div><div id="login-box-field" style="margin-top:20px;"><form:input path="domain" class="form-login" title="Domain" value="" size="30" maxlength="2048" /> </div>
		<div id="login-box-name">User:</div><div id="login-box-field"><form:input path="username" class="form-login" title="User" value="" size="30" maxlength="2048" /> </div>
		<div id="login-box-name">Password:</div><div id="login-box-field"><form:password path="password" class="form-login" title="Password" value="" size="30" maxlength="2048" /> </div>

        <------- aca iria el boton!
		
		</div>
	</div>
    </form:form>
  </body>
</html>

Bueno, lo que no se bien como hacer, es combinar el estilo del boton login del segundo archivo (<a href="#"><img src="${pageContext.request.contextPath}/static/images/login-btn.png" width="103" height="42" style="margin-left:90px;" /></a>) con el boton login del primer archivo ( <input type="submit" value="Log In" />)


Eh intentado varias formas, pero no logro tener el funcionamiento del primero en el segundo y estoy haciendo cosas sin saber y no quiero.. Deseo mantener la funcionalidad del primer boton, pero con el estilo del segundo.


Alguna idea?? gracias de ante mano! (si consigo la respuesta la publico)

Última edición por Rapidiablo; 03/11/2011 a las 10:51
  #2 (permalink)  
Antiguo 03/11/2011, 15:19
 
Fecha de Ingreso: julio-2008
Ubicación: Barcelona
Mensajes: 2.100
Antigüedad: 15 años, 8 meses
Puntos: 165
Respuesta: Agregar estilo a un boton.

Te paso dos links de interés:

http://www.htmlya.com.ar/
http://www.cssya.com.ar/
__________________
Gracias por el Karma :D

empleo ofertas de trabajo
  #3 (permalink)  
Antiguo 04/11/2011, 09:09
 
Fecha de Ingreso: febrero-2008
Mensajes: 42
Antigüedad: 16 años, 1 mes
Puntos: 0
Respuesta: Agregar estilo a un boton.

Gracias.. voy a leer esas 2 paginas. Igual sigo con el problema y la verdad q no se como hacer? alguna idea?
  #4 (permalink)  
Antiguo 06/11/2011, 10:47
Avatar de Nachzeher  
Fecha de Ingreso: enero-2003
Mensajes: 249
Antigüedad: 21 años, 1 mes
Puntos: 1
Respuesta: Agregar estilo a un boton.

Puedes agregar estilos a los botones, pero vas a tener problemas al pretender que se vean igual en todos los navegadores.. sobre todo en el Grandísimo hijo de...... de Internet Explorer.

Acá, para evitar problemas y lograr que los botones se vean igual siempre, en todos los navegadores, uso imágenes.

Por lo general uso el tag: <button /> al que le agrego una imgen de fondo de 1px de ancho y de alto el mismo tamaño que debería tener el botón. Esa imagen la edito para que tenga le color el degradado que le de el efecto de boton. Finalmente, entre los estilos quito los bordes y el background natural del tag (button) coloco la imgen de fondo con repeat-x y además agrego border-radius, que funciona en todos los navegadores (Al menos las ultimas versiones)

Así el resultado es un boton decente, agradable y que se ve igual en todos los navegadores. Al menos en las ultima version del explorer funciona el border radius.

Saludos!
  #5 (permalink)  
Antiguo 07/11/2011, 07:00
 
Fecha de Ingreso: febrero-2008
Mensajes: 42
Antigüedad: 16 años, 1 mes
Puntos: 0
Respuesta: Agregar estilo a un boton.

Gracias!.. si eso es lo que tengo en mente de hacer. podrias postearme un ejemplo del codigo para hacer esto??

Saludos y Gracias por la onda!
  #6 (permalink)  
Antiguo 07/11/2011, 09:57
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 14 años, 9 meses
Puntos: 641
Respuesta: Agregar estilo a un boton.

hola yo estoy haciendo unos videotutoriales prácticos de html y css y desde el primero toco este tema.

Curso HTML y CSS

espero te sirva de algo.
  #7 (permalink)  
Antiguo 07/11/2011, 10:00
 
Fecha de Ingreso: febrero-2008
Mensajes: 42
Antigüedad: 16 años, 1 mes
Puntos: 0
Respuesta: Agregar estilo a un boton.

Muy bueno gracias!! .. voy a pegarle una mirada a ese curso.

Etiquetas: css, estilo, botones, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:40.