Efecto de boton gordito

[fedefrankk]

Hola a todos, estoy haciendo un boton sin imagen, solo con css, y me sale chato, quisiera que se note algo como si fuese gordito el boton y al pasar el maus, que se achate, tambien el tema de centrar verticalmente, cuando le pongo pading, se agranda el boton, vertical-aling:midle.. no funcina...


hice esto:

Código CSS:

.green-btn { position:absolute;font-size:16px; text-align:center;
top:509px; margin-left:243px; vertical-align:middle;
   height: 25px;
   width: 50px;
 background: -webkit-linear-gradient(#3f8c23, #9dc282);
   background: -moz-linear-gradient(#3f8c23,#9dc282);
   background: -o-linear-gradient(#3f8c23, #9dc282);
   border:1px solid #4e7832;
    color:#fff;   text-shadow:0 1px 1px rgba(0, 0, 0, 0.3);
   border-radius: 5px 5px 5px 5px;
-moz-border-radius:  5px 5px 5px 5px;
-webkit-border-radius:  5px 5px 5px 5px;
}
 

resultado:



Espero que se entienda lo que busco, se agradece de antemano a todos por sus tiempo.
saludos
fede

[webosiris]

pon esto en tu css:

Código CSS:

weight: overweight
 

perdón pero no me pude contener

mira si alguno de estos 40 tutorials te sirve.

[fedefrankk]

Buenas.!! Muchas gracias por tu repuesta, esta muy buenos los tutoriales.. se agradece.!!!!

saludos
fede

[Luminis]

Crea un hover y en el deberás cambiar el color del borde del botón, igual que el color de fondo, todo esto a un color más claro, eso es lo que yo habria hecho en tu lugar.

Código HTML:

<input type="button" value="VER"/>
 

Código CSS:

input {
  background-color: #173B0B;
  height: 25px;
  width: 50px;
  color:  white;
  border-radius: 5px;
  border-left: 1px solid #898989;
  border-top: 1px solid #898989;
  border-right: 1px solid #494949;
  border-bottom: 1px solid #494949;
}
 
input:hover {
  background-color: #4B8A08;
}
 

No se porque razón no me deja hacer hover mientras está activado el gradient, pero por si acaso, el mismo efecto lo puedes conseguir con una imagen con degredado.

En caso de querer hacerlo con una imagen degradada solo deberás hacer una imagen para el botón sin pulsar y otra para el botón al ser pulsado, luego las pasas por el hover y listo. Saludos!

[fedefrankk]

Hola gracias por el aporte, si me funciona el hover, anda de 10, es increible lo que se puede hacer con css..

Una consulta, si tengo un div dentro de otro div ej.

<div class="a1">
<div class="a2"> texto </div>
</div>

Alguien sabe como hacer un hover para el div a1 y otro distinto para el div a2?

saludos y gracias por sus tiempo.
fede

[Luminis]

Iniciado por fedefrankk

Hola gracias por el aporte, si me funciona el hover, anda de 10, es increible lo que se puede hacer con css..

Una consulta, si tengo un div dentro de otro div ej.

<div class="a1">
<div class="a2"> texto </div>
</div>

Alguien sabe como hacer un hover para el div a1 y otro distinto para el div a2?

saludos y gracias por sus tiempo.
fede

Sencillo:

Código CSS:

.a1:hover {
código para el div a1
}
 
.a2:hover {
código para el div a2
}
 

Y así para todos los divs (y otros elementos) que quieras. Lo importante es que hayas entendido el funcionamiento del hover, y si, lo que puedes hacer con CSS essencillamente increible.

Saludos, espero haberte ayudado.

[fedefrankk]

Hola, gracias por la repuesta, no me sale
porque el div a1 contiene al div a2, entonces paso el raton sobre el div a1 y hace el hover, pero no el de a2. Alomejor me explique mal,

son 2 div el a1 y a2 son dos cuadrados, el a2 esta dentro de a1, en el a1 quiero que al pasar el maus, se ponga las letras de un color y simultaneamente el div a2 quiero que se ponga las letras de otro color.

Ese seria el problema, algo busque pero sale que se puede hacer con jquery...

Saludos y gracias por sus tiempos.
fede

[pzin]

Código CSS:

.a1:hover { color: un_color }
.a1:hover .a2 { color: otro_color }
 

[Luminis]

LOL no había visto que un div estaba dentro de otro, crei que estaban separados. La respuesta es como dice el amigo pzin:

Código CSS:

.a1:hover { 
codigo
}
 
.a1:hover>.a2 { 
codigo
}
 

[fedefrankk]

Muy bueno.!!! muchas gracias.!!!

Iniciado por pzin

Código CSS:

.a1:hover { color: un_color }
.a1:hover .a2 { color: otro_color }
 

Saludos a todos y muchas gracias por compartir info y tiempo

saludos
fede