Como subrayar un texto dentro de un boton?

mape367 · #1 (**permalink**) 23/11/2007, 07:42

Buenas,

Amigos, necesito subrayar sólo un caracter de todo el texto dentro del botón. Sería algo como "Vista Previa". El objetivo de esto sería para indicarle al usuario que con la tecla Alt+V, podrá llamar al metodo programado en ese botón.
El script ya lo tengo listo y funcionando, pero me gustaría agregar ese detalle.

He intentado con varios métodos pero ninguno me funcionó, tambien intenté con css poniendo text-decoration, pero éste me afecta a todo el texto, yo sólo quiero que se subraye una letra de todo el texto.

Alguien podría darme una ayudita?

Desde ya muchas gracias.

Saludos

PatomaS · #2 (**permalink**) 25/11/2007, 01:19

Hola

Aquí tienes un sencillo ejemplo de como hacerlo:

Código HTML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
	<style type="text/css">
		* {border: 0; margin: 0; padding: 0;}
		html,body { width: 100%; height: 100%; background-color: #fff; }
		#Base { width: 100%; height: 100%; background-color: #fff;}
		button {padding: 0.5em; border: 1px solid #000; cursor: pointer;}
		button:hover {background-color: #666; border: 1px solid #000;}
		#destacar {text-decoration:underline;}
	</style>
	<title>Pruebilla</title>
</head>
<body>
<div id="Base">
	<form method="post" action="la_que_sea">
		<button><span id="destacar">T</span>exto del botón</button>
	</form>
</div>
</body>
</html>

Los estilos relevantes son los referentes al button y #destacar.

Los otros estilos y configuraciones están solo para mostrar un documento de base sin modificaciones ni extras.

Felicidad

mape367 · #3 (**permalink**) 26/11/2007, 04:35

Buenas

PatomaS, muchas gracias por responder, tu ejemplo funciona excelente. Yo lo estaba intentando con <input name="vista" type="button.....

Del ejemplo que me diste, también pude deducir que la siguiente forma también funciona:

Código:

<button><u>T</u>exto del botón</button>

Muchas gracias,

Saludos

PatomaS · #4 (**permalink**) 26/11/2007, 09:17

Hola

De nada.

;)

Felicidad