Estilo para boton whatsapp y telegram
Publicado por Luis Rojas (1 intervención) el 22/01/2021 16:50:23
Hola Como estan tengo una duda:
Cree un boton de contacto que muesta un icono de whatsapp y telegram solo el boton funciona bien
Pero cuando quiero pasar el codigo a mi pagina web, se desconfigura por los estilos, hay una forma de hacer que los estilos del boton, solo afecte a ellos?
Les paso el código del boton:
CSS
Cree un boton de contacto que muesta un icono de whatsapp y telegram solo el boton funciona bien
Pero cuando quiero pasar el codigo a mi pagina web, se desconfigura por los estilos, hay una forma de hacer que los estilos del boton, solo afecte a ellos?
Les paso el código del boton:
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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Boton Flotante </title>
<link rel="stylesheet" href="css/redes.css">
<link rel="stylesheet" href="css/fontello.css">
</head>
<body>
<div class="container">
<input type="checkbox" id="btn-mas">
<div class="redes">
<a href="#" class="icon-whatsapp"></a>
<a href="#" class="icon-telegram"></a>
<!-- <a href="#" class="icon-pajarito"></a> <a href="#" class="icon-pinterest"></a> --> </div<div class="btn-mas">
<label for="btn-mas" class="icon-chat"></label>
</div>
</div>
</body>
CSS
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
52
53
54
55
56
57
58
*{
margin: 0; padding: 0;box-sizing: border-box;
}#btn-mas{ display: none;}.container{
position: fixed; bottom: 20px; right: 20px;}.redes a, .icon-chat{
display: block;text-decoration: none;
background: #00bb2d;
color: #fff;
width: 55px; height: 55px;line-height: 55px;
text-align: center;
border radius: 50%;
box-shadow: 0px 1px 10px
rgba(0,0,0,0.4);
transition: all 500ms ease;}.redes a:hover{
background: #fff;
color: #00bb2d;
}.redes a{
margin-bottom: -15px;
opacity: 0; visibility: hidden;}#btn-mas:checked~ .redes a{margin-bottom: 10px;
opacity: 1; visibility: visible;}.icon-chat{
cursor: pointer;background: #00bb2d;
font-size: 23px;
}#btn-mas:checked - .btn-mas .icon-chat{transform: rotate(137deg);
font-size: 25px;
}Valora esta pregunta
0