Html - Change two objects inside a div on hover

Gerardo
September 22, 2024
98 views
1 vote
2 Answers

I have a button and in it I have an svg image (defined in css) and some text. I’m trying to change the color of both the text and the svg on hover and active states of the button, but so far I’m only able to change the svg or the text.. This is the code in html:

<section class="header1 cid-uoclpABLMG" id="nosotros">
    <div class="mbr-section-btn mt-3 ctowa">
        <a class="btn btn-default" href="https://wa.me/5218448699192?text=some%20text" target="_blank">
            <span class="fa-brands--whatsapp-square"></span>
            <span>&nbsp;Contacto WhatsApp</span>
        </a>
    </div>
</section>

And this is the CSS for the svgs:

.fa-brands--whatsapp-square {
  display: inline-block;
  width: 2.63rem;
  height: 3rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='green' d='M224 122.8c-72.7 0-131.8 59.1-131.9 131.8c0 24.9 7 49.2 20.2 70.1l3.1 5l-13.3 48.6l49.9-13.1l4.8 2.9c20.2 12 43.4 18.4 67.1 18.4h.1c72.6 0 133.3-59.1 133.3-131.8c0-35.2-15.2-68.3-40.1-93.2c-25-25-58-38.7-93.2-38.7m77.5 188.4c-3.3 9.3-19.1 17.7-26.7 18.8c-12.6 1.9-22.4.9-47.5-9.9c-39.7-17.2-65.7-57.2-67.7-59.8s-16.2-21.5-16.2-41s10.2-29.1 13.9-33.1c3.6-4 7.9-5 10.6-5c2.6 0 5.3 0 7.6.1c2.4.1 5.7-.9 8.9 6.8c3.3 7.9 11.2 27.4 12.2 29.4s1.7 4.3.3 6.9c-7.6 15.2-15.7 14.6-11.6 21.6c15.3 26.3 30.6 35.4 53.9 47.1c4 2 6.3 1.7 8.6-1c2.3-2.6 9.9-11.6 12.5-15.5c2.6-4 5.3-3.3 8.9-2s23.1 10.9 27.1 12.9s6.6 3 7.6 4.6c.9 1.9.9 9.9-2.4 19.1M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48M223.9 413.2c-26.6 0-52.7-6.7-75.8-19.3L64 416l22.5-82.2c-13.9-24-21.2-51.3-21.2-79.3C65.4 167.1 136.5 96 223.9 96c42.4 0 82.2 16.5 112.2 46.5c29.9 30 47.9 69.8 47.9 112.2c0 87.4-72.7 158.5-160.1 158.5'/%3E%3C/svg%3E");
}

.fa-brands--whatsapp-square:hover,
.fa-brands--whatsapp-square:active {
  display: inline-block;
  width: 2.63rem;
  height: 3rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M224 122.8c-72.7 0-131.8 59.1-131.9 131.8c0 24.9 7 49.2 20.2 70.1l3.1 5l-13.3 48.6l49.9-13.1l4.8 2.9c20.2 12 43.4 18.4 67.1 18.4h.1c72.6 0 133.3-59.1 133.3-131.8c0-35.2-15.2-68.3-40.1-93.2c-25-25-58-38.7-93.2-38.7m77.5 188.4c-3.3 9.3-19.1 17.7-26.7 18.8c-12.6 1.9-22.4.9-47.5-9.9c-39.7-17.2-65.7-57.2-67.7-59.8s-16.2-21.5-16.2-41s10.2-29.1 13.9-33.1c3.6-4 7.9-5 10.6-5c2.6 0 5.3 0 7.6.1c2.4.1 5.7-.9 8.9 6.8c3.3 7.9 11.2 27.4 12.2 29.4s1.7 4.3.3 6.9c-7.6 15.2-15.7 14.6-11.6 21.6c15.3 26.3 30.6 35.4 53.9 47.1c4 2 6.3 1.7 8.6-1c2.3-2.6 9.9-11.6 12.5-15.5c2.6-4 5.3-3.3 8.9-2s23.1 10.9 27.1 12.9s6.6 3 7.6 4.6c.9 1.9.9 9.9-2.4 19.1M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48M223.9 413.2c-26.6 0-52.7-6.7-75.8-19.3L64 416l22.5-82.2c-13.9-24-21.2-51.3-21.2-79.3C65.4 167.1 136.5 96 223.9 96c42.4 0 82.2 16.5 112.2 46.5c29.9 30 47.9 69.8 47.9 112.2c0 87.4-72.7 158.5-160.1 158.5'/%3E%3C/svg%3E");
}

And the CSS for the button:

#nosotros .btn, .filter-button {
    font-size: 18px;
    border: 1px solid #FF0000;
    border-radius: 5px;
    text-align: center;
    color: #FF0000;
    margin-bottom: 30px;
}
#nosotros .btn:hover, .filter-button:hover {
    font-size: 18px;
    border: 1px solid #FFF;
    border-radius: 5px;
    text-align: center;
    color: #ffffff;
    background-color: #FF0000;
}
#nosotros .btn:active, .btn-default:active .filter-button:active {
    background-color: #FFA500;
    color: white;
}

Thanks in advance,

Answers

Might be easier to use a modern Web Component, no JS required with a declarative shadowDOM

I will leave the CSS fine tuning to you

<whatsapp-button>
  <template shadowrootmode="open">
    <style>
      :host {
        display: inline-block;
        font-size: 18px;
        border: 1px solid red;
        border-radius: 5px;
        text-align: center;
        color: red;
        margin-bottom: 30px;
        width: 160px;
      }
      a {
        display: inline-block;
      }
      a:hover {
        inset: 1px solid white;
        color: white;
        background: red;
      }
      a:active {
        background-color: #ffa500;
        color: white;
      }
    </style>
    <a href="https://wa.me/5218448699192?text=some%20text" target="_blank">
      <svg viewBox="0 0 450 450">
        <path
          fill="green"
          d="m226 92c-73 0-132 59-132 132 0 25 7 49 20 70l3 5-13 49 50-13 5 3c20 12 43 18 67 18h0c73 0 133-59 133-132 0-35-15-68-40-93-25-25-58-39-93-39m78 188c-3 9-19 18-27 19-13 2-22 1-48-10-40-17-66-57-68-60s-16-22-16-41 10-29 14-33c4-4 8-5 11-5 3 0 5 0 8 0 2 0 6-1 9 7 3 8 11 27 12 29s2 4 0 7c-8 15-16 15-12 22 15 26 31 35 54 47 4 2 6 2 9-1 2-3 10-12 13-16 3-4 5-3 9-2s23 11 27 13 7 3 8 5c1 2 1 10-2 19m97-279h-352c-26 0-48 22-48 48v352c0 27 22 48 48 48h352c27 0 48-22 48-48v-352c0-27-22-48-48-48m-176 381c-27 0-53-7-76-19l-84 22 23-82c-14-24-21-51-21-79-1-88 71-159 158-159 42 0 82 17 112 47 30 30 48 70 48 112 0 87-73 159-160 159"
        />
      </svg>
      <div>Contacto WhatsApp</div>
    </a>
  </template>
</whatsapp-button>

The hover pseudo selector need to be on the parent/the anchor element. Now, I don’t know what the button should look like, but you could use inline-flex to align the two <span> elements.

Btw. reduce you CSS so that you only specify the properties that should change on hover/active.

.fa-brands--whatsapp-square {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='green' d='M224 122.8c-72.7 0-131.8 59.1-131.9 131.8c0 24.9 7 49.2 20.2 70.1l3.1 5l-13.3 48.6l49.9-13.1l4.8 2.9c20.2 12 43.4 18.4 67.1 18.4h.1c72.6 0 133.3-59.1 133.3-131.8c0-35.2-15.2-68.3-40.1-93.2c-25-25-58-38.7-93.2-38.7m77.5 188.4c-3.3 9.3-19.1 17.7-26.7 18.8c-12.6 1.9-22.4.9-47.5-9.9c-39.7-17.2-65.7-57.2-67.7-59.8s-16.2-21.5-16.2-41s10.2-29.1 13.9-33.1c3.6-4 7.9-5 10.6-5c2.6 0 5.3 0 7.6.1c2.4.1 5.7-.9 8.9 6.8c3.3 7.9 11.2 27.4 12.2 29.4s1.7 4.3.3 6.9c-7.6 15.2-15.7 14.6-11.6 21.6c15.3 26.3 30.6 35.4 53.9 47.1c4 2 6.3 1.7 8.6-1c2.3-2.6 9.9-11.6 12.5-15.5c2.6-4 5.3-3.3 8.9-2s23.1 10.9 27.1 12.9s6.6 3 7.6 4.6c.9 1.9.9 9.9-2.4 19.1M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48M223.9 413.2c-26.6 0-52.7-6.7-75.8-19.3L64 416l22.5-82.2c-13.9-24-21.2-51.3-21.2-79.3C65.4 167.1 136.5 96 223.9 96c42.4 0 82.2 16.5 112.2 46.5c29.9 30 47.9 69.8 47.9 112.2c0 87.4-72.7 158.5-160.1 158.5'/%3E%3C/svg%3E");
}

#nosotros .btn:hover .fa-brands--whatsapp-square,
#nosotros .btn:active .fa-brands--whatsapp-square {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M224 122.8c-72.7 0-131.8 59.1-131.9 131.8c0 24.9 7 49.2 20.2 70.1l3.1 5l-13.3 48.6l49.9-13.1l4.8 2.9c20.2 12 43.4 18.4 67.1 18.4h.1c72.6 0 133.3-59.1 133.3-131.8c0-35.2-15.2-68.3-40.1-93.2c-25-25-58-38.7-93.2-38.7m77.5 188.4c-3.3 9.3-19.1 17.7-26.7 18.8c-12.6 1.9-22.4.9-47.5-9.9c-39.7-17.2-65.7-57.2-67.7-59.8s-16.2-21.5-16.2-41s10.2-29.1 13.9-33.1c3.6-4 7.9-5 10.6-5c2.6 0 5.3 0 7.6.1c2.4.1 5.7-.9 8.9 6.8c3.3 7.9 11.2 27.4 12.2 29.4s1.7 4.3.3 6.9c-7.6 15.2-15.7 14.6-11.6 21.6c15.3 26.3 30.6 35.4 53.9 47.1c4 2 6.3 1.7 8.6-1c2.3-2.6 9.9-11.6 12.5-15.5c2.6-4 5.3-3.3 8.9-2s23.1 10.9 27.1 12.9s6.6 3 7.6 4.6c.9 1.9.9 9.9-2.4 19.1M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48M223.9 413.2c-26.6 0-52.7-6.7-75.8-19.3L64 416l22.5-82.2c-13.9-24-21.2-51.3-21.2-79.3C65.4 167.1 136.5 96 223.9 96c42.4 0 82.2 16.5 112.2 46.5c29.9 30 47.9 69.8 47.9 112.2c0 87.4-72.7 158.5-160.1 158.5'/%3E%3C/svg%3E");
}

#nosotros .btn,
.filter-button {
  display: inline-flex;
  align-items: center;
  gap: .2em;
  font-size: 18px;
  border: 1px solid #FF0000;
  border-radius: 5px;
  color: #FF0000;
  margin-bottom: 30px;
}

#nosotros .btn:hover,
.filter-button:hover {
  border: 1px solid #FFF;
  color: #ffffff;
  background-color: #FF0000;
}

#nosotros .btn:active,
.btn-default:active,
.filter-button:active {
  background-color: #FFA500;
  color: white;
}

<section class="header1 cid-uoclpABLMG" id="nosotros">
  <div class="mbr-section-btn mt-3 ctowa">
    <a class="btn btn-default" href="https://wa.me/5218448699192?text=some%20text" target="_blank">
      <span class="fa-brands--whatsapp-square"></span>
      <span>Contacto WhatsApp</span>
    </a>
  </div>
</section>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Change two objects inside a div on hover

Answers