Fuente: http://css-button-designer.softonic.com/
Programa gratuito, fácil de manejar y con muchas opciones (botón normal, botón al pulsarse, etc). Nos da 2 códigos (el del aspecto -CSS-) y el del botón en sí (HTML).
He generado los códigos y los he acoplado a la estructura básica, quedando así:
<HTML>
<HEAD> <TITLE> TITULO </HEAD> </TITLE>
<BODY>
1er botón
<style type="text/css">
input.groovybutton
{
font-size:16px;
font-family:Comic Sans MS,sans-serif;
color:#0033FF;
border-top-style:outset;
border-top-color:#CC33FF;
border-top-width:2px;
border-bottom-style:window-inset;
border-bottom-color:#CC33FF;
border-bottom-width:2px;
border-left-style:outset;
border-left-color:#CC33FF;
border-left-width:2px;
border-right-style:outset;
border-right-color:#CC33FF;
border-right-width:2px;
}
</style>
<script language="javascript">
function goLite(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.color =
"#FF9966";
}
function goDim(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.color =
"#0033FF";
}
</script>
<form name="groovyform">
<input
type="button"
name="groovybtn1"
class="groovybutton"
value="Cursos"
title=""
onMouseOver="goLite(this.form.name,this.name)"
onMouseOut="goDim(this.form.name,this.name)">
</form>
2º botón
<style type="text/css">
input.groovybutton
{
font-size:16px;
font-family:Comic Sans MS,sans-serif;
color:#0033FF;
border-top-style:outset;
border-top-color:#CC33FF;
border-top-width:2px;
border-bottom-style:window-inset;
border-bottom-color:#CC33FF;
border-bottom-width:2px;
border-left-style:outset;
border-left-color:#CC33FF;
border-left-width:2px;
border-right-style:outset;
border-right-color:#CC33FF;
border-right-width:2px;
}
</style>
<script language="javascript">
function goLite(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.color =
"#FF9966";
}
function goDim(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.color =
"#0033FF";
}
</script>
<form name="groovyform">
<input
type="button"
name="groovybtn1"
class="groovybutton"
value="Contacto"
title=""
onMouseOver="goLite(this.form.name,this.name)"
onMouseOut="goDim(this.form.name,this.name)">
</form>
</BODY>
</HTML>
No hay comentarios:
Publicar un comentario