1

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>

1
  • 2
    Este HTML es inválido: el elemento div no está permitido como hijo de button. 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 de button, en este caso sugiero a. Por favor leer: guiadev.com/validar-el-codigo-html-y-css
    – Diego V
    Commented el 17 may. 2019 a las 8:40

1 respuesta 1

3

hola puedes apoyarte de jquery para hacer lo que necesitas

$( document ).ready(function() {
     //aqui agregar tu contenido al div que muestra
     $('.content').append($('<a href="https://es.stackoverflow.com/" target="_blank">Detalle</a>'));
});
body {font-family: Arial, sans-serif; background:black;}


@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;
}
}
<br><br><br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

  • En este caso lo estoy haciendo en la carga del documento
  • Si quieres diferentes enlaces para cada uno deberas crear ids para cada div
3
  • 1
    Gracias Carlos, estoy tratando de pasarlo a javascript porque cada boton tiene un link distinto. Estoy tratando de hacer esto: function content() { $('#ibera').append($('<a href="https://es.stackoverflow.com/" target="_blank">Detalle</a>')); } para usar desde un id, pero no me funciona
    – user101604
    Commented el 16 may. 2019 a las 21:09
  • 1
    no esta de mas preguntar pero, le agregaste la etiqueta id en el div ? Commented el 16 may. 2019 a las 21:15
  • 1
    Eso lo hice, pero al tratar de pasarlo a javascript no funciona: este es el div: <div class="content" id="ibera" y este es el script: function content() { $('#ibera').append($('<a href="https://es.stackoverflow.com/"></a>')); }
    – user101604
    Commented el 16 may. 2019 a las 21:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.