Tengo un sitio en el cual utilizo botones para identificar una ciudad. Cuando se hace click en cada ciudad se desplega la una imagen que indica el título un texto que dice “mas info”.
El problema es que quiero agregar una etiqueta a
dentro del botón y cuando el usuario hace click no se desplega, sino que lo envía al sitio directamente. También traté de hacerlo dentro del div
pero sigo con el mismo problema.
¿Cómo puedo insertar un enlace dentro de un botón sin que afecte la animación?
body {font-family: Arial, sans-serif;}
@media only screen and (max-width: 600px) {
div {
position: relative;
box-sizing: border-box;
}
h2 {
font-size: 24pt;
margin-bottom: 20px;
text-transform: uppercase;
font-family: "Roboto Condensed", Helvetica, sans-serif;
font-weight: 300;
}
p {
font-size: 12pt;
margin-bottom: 12pt;
}
.centered-y {
position: absolute;
width: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.distribution-map {
position: relative;
width: 100%;
padding: 10px;
box-sizing: border-box;
margin: 0 auto;
}
.distribution-map>img {
width: 100%;
position: relative;
margin: 0;
padding: 0;
}
.distribution-map .map-point {
cursor: pointer;
outline: none;
z-index: 0;
position: absolute;
width: 40px;
height: 40px;
box-sizing: border-box;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
-moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s, border-radius 0.25s;
-o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s, border-radius 0.25s;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out, border-radius 0.25s;
-webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s, 0.25s, 0.25s;
transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s, border-radius 0.25s ease-in-out, transform 0.25s ease-in-out;
background: rgba(26, 26, 26, 0.85);
border: 3px solid #7fcff7;
border-radius: 100% 100% 100% 0;
}
.distribution-map .map-point::before {
content:"";
position: absolute;
width: 10px;
height: 10px;
background:white;
top: 50%;
left: 50%;
border-radius: 100%;
transform: translate(-50%, -50%);
}
.distribution-map .map-point:active::before,
.distribution-map .map-point:focus::before {
display: none;
}
.distribution-map .map-point .content {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
transition: opacity 0.25s ease-in-out;
width: 100%;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
overflow: overlay;
}
.distribution-map .map-point:active,
.distribution-map .map-point:focus {
margin: 0;
padding: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
width: 300px;
height: 172px;
border-radius: 0%;
color: #e5e5e5;
z-index: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, border-radius 0.25s ease-in-out, border-radius 0.25 ease-in-out, transform 0.25s;
}
.distribution-map .map-point:active .content,
.distribution-map .map-point:focus .content {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0s, 0s;
transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
overflow: hidden;
}
.distribution-map .map-point:active .content a:hover,
.distribution-map .map-point:active .content a:active,
.distribution-map .map-point:focus .content a:hover,
.distribution-map .map-point:focus .content a:active {
color: #afe1fa;
}
}
@media only screen and (min-width: 601px) {
div {
position: relative;
box-sizing: border-box;
}
h2 {
font-size: 24pt;
margin-bottom: 20px;
text-transform: uppercase;
font-family: "Roboto Condensed", Helvetica, sans-serif;
font-weight: 300;
}
p {
font-size: 12pt;
margin-bottom: 12pt;
}
.centered-y {
position: absolute;
width: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.distribution-map {
position: relative;
width: 100%;
padding: 10px;
box-sizing: border-box;
margin: 0 auto;
}
.distribution-map>img {
width: 100%;
position: relative;
margin: 0;
padding: 0;
}
.distribution-map .map-point {
cursor: pointer;
outline: none;
z-index: 0;
position: absolute;
width: 40px;
height: 40px;
box-sizing: border-box;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
-moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s, border-radius 0.25s;
-o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s, border-radius 0.25s;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out, border-radius 0.25s;
-webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s, 0.25s, 0.25s;
transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s, border-radius 0.25s ease-in-out, transform 0.25s ease-in-out;
background: rgba(26, 26, 26, 0.85);
border: 3px solid #7fcff7;
border-radius: 100% 100% 100% 0;
}
.distribution-map .map-point::before {
content:"";
position: absolute;
width: 10px;
height: 10px;
background:white;
top: 50%;
left: 50%;
border-radius: 100%;
transform: translate(-50%, -50%);
}
.distribution-map .map-point:active::before,
.distribution-map .map-point:focus::before {
display: none;
}
.distribution-map .map-point .content {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
transition: opacity 0.25s ease-in-out;
width: 100%;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
overflow: overlay;
}
.distribution-map .map-point:active,
.distribution-map .map-point:focus {
margin: 0;
padding: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
width: 375px;
height: 172px;
border-radius: 0%;
color: #e5e5e5;
z-index: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, border-radius 0.25s ease-in-out, border-radius 0.25 ease-in-out, transform 0.25s;
}
.distribution-map .map-point:active .content,
.distribution-map .map-point:focus .content {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0s, 0s;
transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
overflow: hidden;
}
.distribution-map .map-point:active .content a:hover,
.distribution-map .map-point:active .content a:active,
.distribution-map .map-point:focus .content a:hover,
.distribution-map .map-point:focus .content a:active {
color: #afe1fa;
}
}
<div class="distribution-map">
<img src="http://allonCiudad.net/wp-content/uploads/2019/04/mapafondo.png">
<button class="map-point" style="top:30%;left:59%">
<div class="content" style="background-image: url('constitucion.png'); background-repeat: no-repeat; background-position: center; background-size: contain;">
</div>
</button>
<button class="map-point" style="top:16%;left:65%">
<div class="content" style="background-image: url('itati.png'); background-repeat: no-repeat; background-position: center; background-size: contain;">
</button>
<button class="map-point" style="top:19%;left:67%">
<div class="content" style="background-image: url('ibera.png'); background-repeat: no-repeat; background-position: center; background-size: contain;">
</button>
<button class="map-point" style="top:46%;left:29%">
<div class="content" style="background-image: url('patagonia.png'); background-repeat: no-repeat; background-position: center; background-size: contain;">
</div>
</button>
</div>
div
no está permitido como hijo debutton
. Más en general, los elemento de tipo en línea (inline elements), no pueden contener elementos de tipo bloque (block elements). Deberias usar otro elemento en lugar debutton
, en este caso sugieroa
. Por favor leer: guiadev.com/validar-el-codigo-html-y-css