Código de CSS - Efecto sobre un botón al pasar el ratón por encima

Imágen de perfil
Val: 200
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Efecto sobre un botón al pasar el ratón por encimagráfica de visualizaciones


CSS

Publicado el 26 de Mayo del 2019 por Joan
638 visualizaciones desde el 26 de Mayo del 2019
Efecto de lineas que se alargan al pasar el ratón por encima del botón

efecto-boton

Versión 1

Publicado el 26 de Mayo del 2019gráfica de visualizaciones de la versión: Versión 1
639 visualizaciones desde el 26 de Mayo del 2019
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
 
<style>
.button {
  background-color: #c47135;
  border: none;
  color: #ffffff;
  outline: none;
  padding: 12px 40px 10px;
  position: relative;
}
.button:before,
.button:after {
  border: 0 solid transparent;
  transition: all 0.25s;
  content: '';
  height: 24px;
  position: absolute;
  width: 24px;
}
.button:before {
  border-top: 2px solid #c47135;
  left: 0px;
  top: -5px;
}
.button:after {
  border-bottom: 2px solid #c47135;
  bottom: -5px;
  right: 0px;
}
.button:hover {
  background-color: #c47135;
}
.button:hover:before,
.button:hover:after {
  height: 100%;
  width: 100%;
}
</style>
 
</head>
 
<body>
 
    <div class="button-border"><button class="button">Enviar</button></div>
 
</body>
 
</html>



Comentarios sobre la versión: Versión 1 (0)


No hay comentarios
 

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s5327