Autor Tema: Botones CSS [Con efecto de hover] (Leído 3453 veces)

foroposteadores · « **en:** Noviembre 25, 2010, 06:21:51 pm »

Hola a todos!
Ayer unos chavones de t! me pasaron unos botones css,y quise compartirlos con usutedes.
Una Cap:

En Su .css agregan el siguiente codigo:

Citar

/* botones css compartidos por foroposteadores xD */

.button{
background:url('images/botones.gif') repeat-x;
background-color:#1769BA;
border:1px solid #173977;
cursor:pointer;
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:5px 5px;
min-width:100px;
padding:8px 10px;
text-shadow:0 1px 1px #000000;
-moz-box-shadow:1px 1px 1px #A7A7A7;
-moz-border-radius:5px;
-webkit-box-shadow:1px 1px 1px #A7A7A7;
-webkit-border-radius:5px;
}
a.button{color:#FFF;}
a.button:hover{text-decoration:none;}
.button:hover{
-moz-box-shadow:0px 0px 10px #5298f0;
-webkit-box-shadow:0px 0px 10px #5298f0;
}
.button:active{
background:#2b79cc;
font-weight:bold;
color:#0B243B;
text-shadow:1px 1px 1px #4f96ed;
-moz-box-shadow:none!important;
}
input.button:disabled{
opacity:0.5;
filter:alpha(opacity=50);
}

/*Botones 2.0 Colores*/

/*Rojo*/

.button.rojo{
background:url('images/botones.gif') 0 -45px repeat-x;
background-color:#1769BA;
border-color:#530e0e;
}
.button.rojo:hover{
-moz-box-shadow:0px 0px 10px #FD9393;
-webkit-box-shadow:0px 0px 10px #FD9393;
}
.button.rojo:active{ background:#bf1e1e; color:#610B0B; text-shadow:1px 1px 1px #f06161;}

/*Verde*/

.button.verde{
background:url('images/botones.gif') 0 -90px repeat-x;
background-color:#2f9a12;
border-color:#0d5020;
}
.button.verde:hover{
-moz-box-shadow:0px 0px 10px #64e34b;
-webkit-box-shadow:0px 0px 10px #64e34b;
}
.button.verde:active{ background:#2f9a12; color:#0B3B0B; text-shadow:1px 1px 1px #61df48;}

/*Amarillo*/

.button.amarillo{
background:url('images/botones.gif') 0 -135px repeat-x;
background-color:#b9ba18;
border-color:#565c13;
color:#000;
text-shadow:1px 1px 1px #FFF;
}
.button.amarillo:hover{
-moz-box-shadow:0px 0px 10px #b9ba18;
-webkit-box-shadow:0px 0px 10px #b9ba18;
}
.button.amarillo:active{ font-weight:normal; background:#b9ba18; color:#393B0B; text-shadow:1px 1px 1px #f0ef61;}

/*Gris*/

.button.gris{
background:url('images/botones.gif') 0 -180px repeat-x;
background-color:#a5a4a4;
color:#000;
text-shadow:1px 1px 1px #FFF;
border-color:#61615f;
}
.button.gris:hover{
-moz-box-shadow:0px 0px 10px #a4a4a3;
-webkit-box-shadow:0px 0px 10px #a4a4a3;
}
.button.gris:active{ font-weight:normal; background:#a5a4a4; color:#2E2E2E; text-shadow:1px 1px 1px #dcdbda;}

/*Naranja*/

.button.naranja{
background:url('images/botones.gif') 0 -225px repeat-x;
background-color:#c57617;
border-color:#855614;
}
.button.naranja:hover{
-moz-box-shadow:0px 0px 12px #d69335;
-webkit-box-shadow:0px 0px 12px #d69335;
}
.button.naranja:active{ background:#c87c1d; color:#61380B; text-shadow:1px 1px 1px #efc063;}

/* botones css compartidos por foroposteadores xD */

Suben la imagen adjunta "botones.gif" a /Themes/tu theme/images/
Ahor apara usar los botones,aca les dejo la funciones:

Citar

Azul: <input class="button" value="Normal" type="submit">
Rojo: <input class="button rojo" value="Rojo" type="submit">
Verde: <input class="button verde" value="Verde" type="submit">
Amarillo: <input class="button amarillo" value="Amarillo" type="submit">
Gris: <input class="button gris" value="Gris" type="submit">
Naranja: <input class="button naranja" value="Naranja" type="submit">

Espero que les guste.
Chau!
DEMO: http://www.foroposteadores.com.ar/botones/index.php

JavieRsp · « **Respuesta #1 en:** Noviembre 25, 2010, 06:26:27 pm »

se agradece +1 :hi:

anferro · « **Respuesta #2 en:** Noviembre 25, 2010, 06:27:54 pm »

Gracias +1

beatlero18 · « **Respuesta #3 en:** Noviembre 25, 2010, 06:44:30 pm »

Muy Buenos +1

Emakp10 · « **Respuesta #4 en:** Noviembre 25, 2010, 06:49:05 pm »

muy bueno siempre me gustaron :up:

KappoAdmi.n · « **Respuesta #5 en:** Noviembre 25, 2010, 07:52:34 pm »

Exelentes ! :hi:

foroposteadores · « **Respuesta #6 en:** Noviembre 26, 2010, 12:59:52 am »

gracias a todos

fivezone · « **Respuesta #7 en:** Noviembre 26, 2010, 01:59:41 am »

re dow!!

50cent · « **Respuesta #8 en:** Noviembre 26, 2010, 02:03:27 am »

Citar

Ayer unos chavones de t! me pasaron unos botones css,y quise compartirlos

Te mandaste una recagada con ese texto.

foroposteadores · « **Respuesta #9 en:** Noviembre 26, 2010, 03:00:32 am »

Cita de: fivezone en Noviembre 26, 2010, 01:59:41 am

re dow!!

si te referis a downfull!,john los habra sacado de ahi y les cambio los textos por pro-button,pero estos botones ya estaban desde antes ,en una comunidad de t!,solamente que borraron le tema y yo lo pedi de vuelta xD

Cita de: 50cent en Noviembre 26, 2010, 02:03:27 am

Citar
Ayer unos chavones de t! me pasaron unos botones css,y quise compartirlos

Te mandaste una recagada con ese texto.

:OO:

50cent · « **Respuesta #10 en:** Noviembre 26, 2010, 03:11:56 am »

Cita de: foroposteadores en Noviembre 26, 2010, 03:00:32 am

Cita de: fivezone en Noviembre 26, 2010, 01:59:41 am
re dow!!
si te referis a downfull!,john los habra sacado de ahi y les cambio los textos por pro-button,pero estos botones ya estaban desde antes ,en una comunidad de t!,solamente que borraron le tema y yo lo pedi de vuelta xD

En que comunidad y quien fue el usuario que los posteo por que creo que jon había denunciado un tema y lo borraron.

evolution_fuller · « **Respuesta #11 en:** Noviembre 26, 2010, 05:20:41 am »

<a class="Boton BtnGray" href="', $scripturl, '?action=imagenes;sa=agregar"><b>', $txt['add_image'], '</b></a></center></div></div>

Como debo de sustituir el codigo de este color por el del gris con hover, ya lo intente pero no me andubo el link de agregar imagenes, es decir el boton gris no me manda a ninguna direccion.

50cent · « **Respuesta #12 en:** Noviembre 26, 2010, 05:29:18 am »

Cita de: evolution_fuller en Noviembre 26, 2010, 05:20:41 am

<a class="Boton BtnGray" href="', $scripturl, '?action=imagenes;sa=agregar"><b>', $txt['add_image'], '</b></a></center></div></div>

Como debo de sustituir el codigo de este color por el del gris con hover, ya lo intente pero no me andubo el link de agregar imagenes, es decir el boton gris no me manda a ninguna direccion.

El class no va adentro de el href va con un div aparte y encima tienes etiquetas al pedo o al menos que atras tengas otro código.

Código: [Seleccionar]

<div class="Boton BtnGray"><a href="', $scripturl, '?action=imagenes;sa=agregar"><b>', $txt['add_image'], '</b></a></div>

foroposteadores · « **Respuesta #13 en:** Noviembre 26, 2010, 05:57:39 am »

Cita de: 50cent en Noviembre 26, 2010, 05:29:18 am

Cita de: evolution_fuller en Noviembre 26, 2010, 05:20:41 am
<a class="Boton BtnGray" href="', $scripturl, '?action=imagenes;sa=agregar"><b>', $txt['add_image'], '</b></a></center></div></div>

Como debo de sustituir el codigo de este color por el del gris con hover, ya lo intente pero no me andubo el link de agregar imagenes, es decir el boton gris no me manda a ninguna direccion.

El class no va adentro de el href va con un div aparte y encima tienes etiquetas al pedo o al menos que atras tengas otro código.

Código: [Seleccionar]
<div class="Boton BtnGray"><a href="', $scripturl, '?action=imagenes;sa=agregar"><b>', $txt['add_image'], '</b></a></div>

:lol::lol::lol::lol: ,no es asi,asi es un boton con url:

Citar

<a href="', $scripturl, '?action=imagenes;sa=agregar"><div class="Boton BtnGray"><b>', $txt['add_image'], '</b></div></a>

:OO::OO::OO:

Bodoqe · « **Respuesta #14 en:** Noviembre 26, 2010, 06:33:12 am »

jajja Buenisimos! :hi:

Small Pirate

Autor Tema: Botones CSS [Con efecto de hover] (Leído 3453 veces)

foroposteadores

Botones CSS [Con efecto de hover]

JavieRsp

Re: Botones CSS [Con efecto de hover]

anferro

Re: Botones CSS [Con efecto de hover]

beatlero18

Re: Botones CSS [Con efecto de hover]

Emakp10

Re: Botones CSS [Con efecto de hover]

KappoAdmi.n

Re: Botones CSS [Con efecto de hover]

foroposteadores

Re: Botones CSS [Con efecto de hover]

fivezone

Re: Botones CSS [Con efecto de hover]

50cent

Re: Botones CSS [Con efecto de hover]

foroposteadores

Re: Botones CSS [Con efecto de hover]

50cent

Re: Botones CSS [Con efecto de hover]

evolution_fuller

Re: Botones CSS [Con efecto de hover]

50cent

Re: Botones CSS [Con efecto de hover]

foroposteadores

Re: Botones CSS [Con efecto de hover]

Bodoqe

Re: Botones CSS [Con efecto de hover]

Bitdate Blog y comunidad sobre tecnología, programación, diseño web, marketing online, descargas y más de lo que esperas.	Nuthost webhosting Líderes desde 2003. Servicios de Web Hosting Individuales y Multicuentas (Revendedores), Registro de Dominios, Certificados SSL, Web Marketing, Email Marketing y Soluciones de Data Center a medida de tus necesidades.
Tú página puede estar aquí.