Agregar estilo a un boton.

Rapidiablo · #1 (**permalink**) 03/11/2011, 10:40

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)

miktrv · #2 (**permalink**) 03/11/2011, 15:19

Te paso dos links de interés:

http://www.htmlya.com.ar/
http://www.cssya.com.ar/

Rapidiablo · #3 (**permalink**) 04/11/2011, 09:09

Gracias.. voy a leer esas 2 paginas. Igual sigo con el problema y la verdad q no se como hacer? alguna idea?

Nachzeher · #4 (**permalink**) 06/11/2011, 10:47

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!

Rapidiablo · #5 (**permalink**) 07/11/2011, 07:00

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!

memoadian · #6 (**permalink**) 07/11/2011, 09:57

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.

Rapidiablo · #7 (**permalink**) 07/11/2011, 10:00

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