Create an html follow icone

Asked

Viewed 289 times

-4

Hello! I am developing an Ecommerce site on a platform with html programming. And the client requested to put a shortcut to access whataspp. How I do the programming of "follow" in html?

html
  • 2

    Hi, Paula! Could you make your question a little clearer? Is that, as far as I know, the Whatsapp is not an app to follow. So I understand that you want to use a button to share the post or link via Whatsapp. Could you clarify your question? Thanks in advance!

  • Some links of references: 001, 002, 003

  • In vdd I want to put an image of the icone of Whatsapp and then put a link to make available the Whatsapp of the sellers. Something like done for https://www.minhacasasolar.com.br/

  • @Paulalutzoff, if any answer has solved your problem you can mark as accepted by clicking on the green V side of the chosen points. Or, if you want, you can leave it open for a while if you want more alternatives, but it is good that after it is resolved you mark some to close the subject. Learn more in "How and why to accept an answer".

1 answer

0

Based on the example of the site you passed as a reference you could do something like this [run the full-screen snippet to view the example]:

.fixed-tabs-Whats {
  position: fixed;
  right: 0px;
  top: 50%;
  margin-top: -170px;
  z-index: 100;
}

.aba-whatsphone {
  background: #1EBEA5;
  height: 60px;
  width: 70px;
  border-radius: 30px 0 0 30px;
  transition: 0.7s ease;
}

.aba-whatsphone:hover {
  width: 280px;
  transition: 0.7s ease;
}

.aba-whatsphone-icone {
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/WhatsApp.svg/1024px-WhatsApp.svg.png') no-repeat; 
  width: 280px;
  background-size: 50px;
  background-position-y: 4px;
  background-position-x: 14px;
  padding: 7px;
}

.aba-whatsphone-icone a {
  color: #ffffff;
  font-size: 14px;
  line-height: 20px;
  margin-left: 70px;
  text-decoration: none;
  height: 60px;
  font-family: sans-serif;
}

.aba-whatsphone-icone a strong {
  display: block;
  font-size: 21px;
  margin-left: 70px;
}
<div class="fixed-tabs-Whats">
  <div class="aba-whatsphone">
    <div class="aba-whatsphone-icone">
      <a target="_blank" href="https://api.whatsapp.com/send?phone=5500000000000&text=D%C3%BAvida%20Site">Clique aqui <br><strong>e entre em contato!</strong></a>       
    </div>
  </div>          
</div>

For the Whatsapp contact link you can use the API of the same and change the dummy number of the example to the desired.

In addition you can also take out the message that appears when passing the mouse cursor on the Whatsapp icon.

  • What I need to add so the link can follow the scroll of the page?

  • It has already been designed to accompany the scroll of the page.

  • More is not following .. when I roll the page, it disappears

  • Look at that page and resizes to test on smaller pages. When decreasing you will see that you have scrolled on the page and the icon accompanies it.

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.