Foros del Web » Creando para Internet » CSS »

Efecto de boton gordito

Estas en el tema de Efecto de boton gordito en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/10/2014, 16:39
Avatar de fedefrankk  
Fecha de Ingreso: agosto-2007
Mensajes: 871
Antigüedad: 16 años, 7 meses
Puntos: 7
Pregunta Efecto de boton gordito

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:
Ver original
  1. .green-btn { position:absolute;font-size:16px; text-align:center;
  2. top:509px; margin-left:243px; vertical-align:middle;
  3.    height: 25px;
  4.    width: 50px;
  5.  background: -webkit-linear-gradient(#3f8c23, #9dc282);
  6.    background: -moz-linear-gradient(#3f8c23,#9dc282);
  7.    background: -o-linear-gradient(#3f8c23, #9dc282);
  8.    border:1px solid #4e7832;
  9.     color:#fff;   text-shadow:0 1px 1px rgba(0, 0, 0, 0.3);
  10.    border-radius: 5px 5px 5px 5px;
  11. -moz-border-radius:  5px 5px 5px 5px;
  12. -webkit-border-radius:  5px 5px 5px 5px;
  13. }

resultado:



Espero que se entienda lo que busco, se agradece de antemano a todos por sus tiempo.
saludos
fede
  #2 (permalink)  
Antiguo 08/10/2014, 21:03
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 22 años, 1 mes
Puntos: 998
Respuesta: Efecto de boton gordito

pon esto en tu css:
Código CSS:
Ver original
  1. weight: overweight
perdón pero no me pude contener

mira si alguno de estos 40 tutorials te sirve.
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 09/10/2014, 16:52
Avatar de fedefrankk  
Fecha de Ingreso: agosto-2007
Mensajes: 871
Antigüedad: 16 años, 7 meses
Puntos: 7
Respuesta: Efecto de boton gordito

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

saludos
fede
  #4 (permalink)  
Antiguo 09/10/2014, 20:04
 
Fecha de Ingreso: abril-2014
Ubicación: 3 metros sobre la casa de abajo
Mensajes: 40
Antigüedad: 9 años, 10 meses
Puntos: 6
Respuesta: Efecto de boton gordito

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:
Ver original
  1. <input type="button" value="VER"/>

Código CSS:
Ver original
  1. input {
  2.   background-color: #173B0B;
  3.   height: 25px;
  4.   width: 50px;
  5.   color:  white;
  6.   border-radius: 5px;
  7.   border-left: 1px solid #898989;
  8.   border-top: 1px solid #898989;
  9.   border-right: 1px solid #494949;
  10.   border-bottom: 1px solid #494949;
  11. }
  12.  
  13. input:hover {
  14.   background-color: #4B8A08;
  15. }

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!
__________________
Vivir y aprender... ojalá pudiera resistir por lo menos 150 años.
  #5 (permalink)  
Antiguo 10/10/2014, 15:46
Avatar de fedefrankk  
Fecha de Ingreso: agosto-2007
Mensajes: 871
Antigüedad: 16 años, 7 meses
Puntos: 7
Pregunta Respuesta: Efecto de boton gordito

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
  #6 (permalink)  
Antiguo 12/10/2014, 02:36
 
Fecha de Ingreso: abril-2014
Ubicación: 3 metros sobre la casa de abajo
Mensajes: 40
Antigüedad: 9 años, 10 meses
Puntos: 6
Respuesta: Efecto de boton gordito

Cita:
Iniciado por fedefrankk Ver Mensaje
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:
Ver original
  1. .a1:hover {
  2. código para el div a1
  3. }
  4.  
  5. .a2:hover {
  6. código para el div a2
  7. }

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.
__________________
Vivir y aprender... ojalá pudiera resistir por lo menos 150 años.

Última edición por Luminis; 12/10/2014 a las 02:43
  #7 (permalink)  
Antiguo 12/10/2014, 14:22
Avatar de fedefrankk  
Fecha de Ingreso: agosto-2007
Mensajes: 871
Antigüedad: 16 años, 7 meses
Puntos: 7
Pregunta Respuesta: Efecto de boton gordito

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
  #8 (permalink)  
Antiguo 12/10/2014, 14:55
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Efecto de boton gordito

Código CSS:
Ver original
  1. .a1:hover { color: un_color }
  2. .a1:hover .a2 { color: otro_color }
__________________
(:
  #9 (permalink)  
Antiguo 12/10/2014, 22:01
 
Fecha de Ingreso: abril-2014
Ubicación: 3 metros sobre la casa de abajo
Mensajes: 40
Antigüedad: 9 años, 10 meses
Puntos: 6
Respuesta: Efecto de boton gordito

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:
Ver original
  1. .a1:hover {
  2. codigo
  3. }
  4.  
  5. .a1:hover>.a2 {
  6. codigo
  7. }
__________________
Vivir y aprender... ojalá pudiera resistir por lo menos 150 años.
  #10 (permalink)  
Antiguo 13/10/2014, 16:09
Avatar de fedefrankk  
Fecha de Ingreso: agosto-2007
Mensajes: 871
Antigüedad: 16 años, 7 meses
Puntos: 7
Respuesta: Efecto de boton gordito

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


Cita:
Iniciado por pzin Ver Mensaje
Código CSS:
Ver original
  1. .a1:hover { color: un_color }
  2. .a1:hover .a2 { color: otro_color }

Saludos a todos y muchas gracias por compartir info y tiempo

saludos
fede

Etiquetas: background, boton, color, efecto, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:50.