Estilizar botón 'click' en HTML

AlexxxBcN · 15 Sep 2014

Hola tengo este codigo , y me gustaria dar estilo al boton "click"

Ponerle borde...tamaño..

Insertar CODE, HTML o PHP:

<h1 style="background-color: #1b1a1a; border-radius: 10px 10px 10px 10px; border: 5px ridge #009EFF; font-family: Verdana; font-weight: bold; text-align: center;">
<span style="color: #009eff;"><span style="font-size: x-large;">
<b>HOLA</b></span></span></h1>
<div style="text-align: center;">
<div>
<input onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Esconder';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Click';}" type="button" value="Click" /><br />
<div style="display: none;">
<br />
HOLA


</div>
</div>
</div>

Como le puedo dar estilo a ese boton ? Gracias !!1

pancho91 · 16 Sep 2014

1ro - Lo ideal, ponele una clase, ej:

<input class="boton"...

O un ID si es un estilo único a ese elemento, ej:

<input id="botonVerde"...

Y luego simplemente con CSS:

.boton {border: 2px solid #000;}

ó si es un ID:

#botonVerde {border: 2px solid #000;}

Y ya entre las llaves ("{..}") podes agregar cualquier otra propiedad CSS que quieras.

Saludos

ramifenili · 20 Sep 2014

Como ya dijo el otro usuario, lo que podés hacer es asignarle un ID o una clase al botón.

Podés ver un ejemplo acá: Edit fiddle - JSFiddle :encouragement:

RodrigoMaster7 · 23 Sep 2014

Ya te he dejado un CSS ya tu lo modificas mas a tu gusto, espero haberte ayudado.

HTML:

<h1 style="background-color: #1b1a1a; border-radius: 10px 10px 10px 10px; border: 5px ridge #009EFF; font-family: Verdana; font-weight: bold; text-align: center;">
<span style="color: #009eff;"><span style="font-size: x-large;">
<b>HOLA</b></span></span></h1>
<div style="text-align: center;">
<div>


<style>
input{
    color:#08233e;float:center;
    font:2.4em Futura, ‘comic’, AppleGothic, sans-serif;
    font-size:20px;
    width:20%;
    padding:6px;
    background:url(overlay.png) repeat-x center #ffcc00;
    background-color:rgba(255,204,0,1);
    border:1px solid #ffcc00;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    border-bottom:1px solid #9f9f9f;
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
    cursor:pointer;
}
.button input:hover{
    background-color:rgba(255,204,0,0.8);
}
</style>
<div class="button">

<input onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Esconder';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Click';}" type="button" value="Click" />

<br />
<div style="display: none;">
<br />
HOLA
</div>


</div>
</div>
</div>

Estilizar botón 'click' en HTML

AlexxxBcN

pancho91

ramifenili

RodrigoMaster7

Temas similares