Inicio
Buscar
Ingresar
Registrarse
Starfield: el juego que revolucionará el espacio y la tecnología
Hack x Crack - Comunidad de Seguridad informática
»
Programación
»
Programación Web
»
6 efectos hover para tus botones
Imprimir
Páginas: [
1
]
Ir Abajo
Autor
Tema: 6 efectos hover para tus botones (Leído 9959 veces)
R3LI4NT
{ L4 } Geek
Mensajes: 396
Cuanto más silencioso te vuelves, más puedes oir.
6 efectos hover para tus botones
«
en:
Abril 14, 2021, 03:18:53 am »
6 efectos
:HOVER
para tus botones
Código HTML:
Código: Text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos.css">
<!-- Fuente Texto -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200&display=swap" rel="stylesheet">
<title>Botones</title>
</head>
<body>
<!-- Botones :) -->
<button class="btn_1">Boton 1</button>
<button class="btn_2">Boton 2</button>
<button class="btn_3">Boton 3</button>
<button class="btn_4">Boton 4</button>
<button class="btn_5">Boton 5</button>
<button class="btn_6">Boton 6</button>
</body>
</html>
Código CSS:
Código: CSS
*
{
margin
:
0
;
padding
:
0
;
box-sizing
:
border-box
;
}
body
{
width
:
100vw
;
height
:
100vh
;
background-image
:
linear-gradient
(
60deg
,
#000000
0%
,
#434343
100%
)
;
font-family
:
'Titillium Web'
,
sans-serif
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
}
button
:focus
{
outline
:
0
;
}
button
{
background-color
:
transparent
;
border
:
2px
solid
;
font-size
:
20px
;
border-radius
:
12px
;
cursor
:
pointer
;
margin
:
20px
;
padding
:
1.1rem 1.9rem
;
color
:
#fff
;
}
/* BOTON 1 */
.btn_1
{
border-color
:
#3F9768
;
transition
:
box-shadow 0.3s ease-in-out
;
text-shadow
:
2px
2px
2px
black
;
}
.btn_1
:hover
{
box-shadow
:
0
0
30px
30px
#3F9768
inset
;
}
/* BOTON 2 */
.btn_2
{
background-image
:
linear-gradient
(
50deg
,
#2D65DD
50%
,
transparent
50%
)
;
border-color
:
#2D65DD
;
background-position
:
100%
;
background-size
:
250%
;
text-shadow
:
2px
2px
2px
black
;
transition
:
background
0.4s ease-in-out
;
}
.btn_2
:hover
{
background-position
:
0
;
}
/* BOTON 3 */
.btn_3
{
border-color
:
#CF2A2A
;
box-shadow
:
0
0
30px
30px
#CF2A2A
inset
;
transition
:
box-shadow 0.3s ease-in-out
;
}
.btn_3
:hover
{
box-shadow
:
0
0
12px
0
#CF2A2A
inset
,
0
0
12px
4px
#CF2A2A
;
}
/* BOTON 4 */
.btn_4
{
color
:
white
;
text-decoration
:
none
;
overflow
:
hidden
;
transition
:
0.2s
;
border
:
2px
solid
#FF0B0B
;
text-shadow
:
2px
2px
2px
black
;
}
.btn_4
:hover
{
background
:
#FF0B0B
;
box-shadow
:
0
0
12px
#FF0B0B
,
0
0
12px
#FF0B0B
,
0
0
22px
#FF0B0B
;
}
/* BOTON 5 */
.btn_5
{
border-color
:
#FF8B25
;
position
:
relative
;
overflow
:
hidden
;
text-shadow
:
2px
2px
2px
black
;
z-index
:
1
;
}
.btn_5
:after
{
content
:
""
;
position
:
absolute
;
top
:
0
;
left
:
50%
;
transform
:
translateX
(
-50%
)
;
width
:
0
;
height
:
100%
;
background-color
:
#FF8B25
;
z-index
:
-
1
;
transition
:
width
0.3s ease-in-out
;
}
.btn_5
:hover
:after
{
width
:
110%
;
}
/* BOTON 6 */
.btn_6
{
border
:
none
;
background-image
:
linear-gradient
(
to
top
,
#f77062
0%
,
#fe5196
100%
)
;
transition
:
0.3s
;
}
.btn_6
:hover
{
box-shadow
:
0
5px
10px
0
rgba
(
252
,
122
,
249
)
;
transition
:
0.3s
;
}
Saludos,
#R3LI4NT
«
Última modificación: Abril 14, 2021, 03:25:22 am por R3LI4NT
»
En línea
No contesto dudas por MP, si las tienes, las planteas en el foro.
Road To Hacking v3:
https://github.com/R3LI4NT/road-to-hacking
Juanete65
{ L0 } Ñuub
Mensajes: 2
Re:6 efectos hover para tus botones
«
Respuesta #1 en:
Junio 15, 2021, 02:06:13 am »
Estoy sorprendido cada día aprendo más en este foro, en mi preferencia creo que me voy por el efecto número 5.
_________________________________
Trabajo en la
Consultoría Salesforce
, soy programador S.r
En línea
Angelleder
{ L0 } Ñuub
Mensajes: 3
Ahora la presa se convierte en cazador
Re:6 efectos hover para tus botones
«
Respuesta #2 en:
Septiembre 16, 2021, 12:46:31 pm »
Es lo bueno con CSS se pueden dar miles de estilos con CSS
En línea
Trabajando el apartado de CSS en:
https://patineteselectricosbaratos.com/
Imprimir
Páginas: [
1
]
Ir Arriba
Hack x Crack - Comunidad de Seguridad informática
»
Programación
»
Programación Web
»
6 efectos hover para tus botones
Va un mudo y le dice a un sordo: Hack x Crack usa cookies. Pues eso...
OK
Learn more