Staff en línea
Últimos temas
[Ocio] Contemos hasta el 5000
por Chalo Lun Oct 15, 2018 8:24 am

[Revisado] Errores Yoshi Fans club
por YoshiGM Sáb Oct 13, 2018 12:36 pm

[CSS] Dar estilo a los rangos
por Eslam Love Miér Oct 03, 2018 11:15 pm

[CSS] Botones estilo Flat
Tema iniciado por y Añadir a favoritos

[CSS] Botones estilo Flat 
el Dom Jul 19, 2015 2:38 pm
staff


[codebox]Botones con efecto flat.[/codebox]

HTML:
[hidecode]
Código:
<a href="" class="btn btn_blue">Boton 1</a>
   <a href="" class="btn btn_red">Boton 2</a>
   <a href="" class="btn btn_yell">Boton 3</a>
   <a href="" class="btn btn_green">Boton 4</a>
   <a href="" class="btn btn_gray">Boton 5</a>
[/hidecode]

CSS:
[hidecode]
Código:
.btn{
background: transparent;
border: 2px solid #4B4B4B;
display: inline-block;
padding: 10px 15px;
margin-right: 15px;
color: #424242;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.btn:hover{
background: #464646;
color: #FFF;
text-shadow: 0px 4px 4px #000;
box-shadow: 5px 5px 0px 0px #525151;
}
.btn_blue{
border-color: rgb(64, 156, 179);
color: #26A2B3;
}
.btn_blue:hover{
background: rgb(64, 156, 179);
box-shadow: 5px 5px 0px 0px #4585A8;
}
.btn_red{
border-color: rgb(241, 79, 79);
color: #F85858;
}
.btn_red:hover{
background: rgb(241, 79, 79);
box-shadow: 5px 5px 0px 0px #A84545;
}
.btn_yell{
border-color: rgb(253, 247, 88);
color: #F7FF30;
}
.btn_yell:hover{
background: rgb(253, 247, 88);
box-shadow: 5px 5px 0px 0px #A4A845;
}
.btn_green{
border-color: rgb(67, 187, 44);
color: #25B130;
}
.btn_green:hover{
background: rgb(67, 187, 44);
box-shadow: 5px 5px 0px 0px #4DA845;
}
[/hidecode]
Dosh
avatar

¿Que estoy pensando? :

Vuelve el hijo prodigo... [table class=fecha_up][td]Se modifico:1/010/18 - 15:59 hrs. [/td][/table]


Banner en temas :

https://i.imgur.com/JdnysKr.png


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

1577


Puntos :

2320


Me gusta :

453


ingreso :

07/12/2014


Sexo :

Masculino

Plataforma :

punbb


Navegador :

Chrome


Ver perfil de usuario http://www.telefoneros.com/

Volver arriba Ir abajo

Re: [CSS] Botones estilo Flat 
el Vie Abr 08, 2016 2:33 pm
Que bonito el efecto hover que tienen los botones, lo probaré a ver como queda en alguna tablilla e-e
ladyfreak
avatar

¿Que estoy pensando? :

Hola [table class=fecha_up][td]Se modifico:15/03/17 - 12:08 hrs.[/td][/table]


Banner en temas :

http://i64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

15


Puntos :

22


Me gusta :

7


ingreso :

25/03/2016


Sexo :

Femenino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [CSS] Botones estilo Flat 
el Vie Abr 08, 2016 10:36 pm
deverdad que seve bien chulo lo provare gracias
rokitx
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://www.profilebrand.com/images/facebook-cover/4342-loading-90-percent-facebook-cover.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

72


Puntos :

76


Me gusta :

4


ingreso :

18/05/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [CSS] Botones estilo Flat 
el Sáb Abr 09, 2016 8:00 pm
Tienen un lindo efecto.. Muchas gracias por compartirlo :3
YoshiGM
avatar

¿Que estoy pensando? :

Octubre Sorprendeme [?] [table class=fecha_up][td]Se modifico:1/010/18 - 17:37 hrs. [/td][/table]


Banner en temas :

https://i.servimg.com/u/f19/13/45/80/80/banner10.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #555


Mensajes :

1151


Puntos :

1548


Me gusta :

237


ingreso :

17/12/2014


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario http://www.yoshifansclub.net

Volver arriba Ir abajo

undefined 
el Miér Mayo 11, 2016 4:30 pm
esta muy bonito gracias,,,
rokitx
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://www.profilebrand.com/images/facebook-cover/4342-loading-90-percent-facebook-cover.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

72


Puntos :

76


Me gusta :

4


ingreso :

18/05/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [CSS] Botones estilo Flat 
el Mar Nov 22, 2016 9:32 pm
gracias por esto buscaba esto
Zabb
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://i64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

17


Puntos :

19


Me gusta :

2


ingreso :

22/11/2016


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [CSS] Botones estilo Flat 
el Vie Sep 15, 2017 11:16 pm
AYUDA A FORTALECER MI CSS
muykay
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://i64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

67


Puntos :

69


Me gusta :

2


ingreso :

07/09/2017


Sexo :

Masculino

Plataforma :

punBB


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [CSS] Botones estilo Flat 
el Mar Feb 20, 2018 9:11 am
staff
no lo habbia visto
Chalo
avatar

¿Que estoy pensando? :

ayudando como debe ser [table class=fecha_up][td]Se modifico:2/010/18 - 20:40 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6839


Puntos :

8934


Me gusta :

1030


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.