Staff en línea

[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 :

1585


Puntos :

2328


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? :

Ho,Ho,Ho! [table class=fecha_up][td]Se modifico:11/12/18 - 20:52 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 :

1168


Puntos :

1567


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? :

Soy leyenda 3.0 [table class=fecha_up][td]Se modifico:20/11/18 - 12:05 hrs. [/td][/table]


Banner en temas :

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


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6863


Puntos :

8959


Me gusta :

1031


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.