Whatsapp悬停按钮 CSS-HTML介绍

WhatsApp是一种流行的即时通讯应用程序，许多网站都希望将WhatsApp作为其在线营销策略的一部分。为此，他们使用WhatsApp悬停按钮，这是一种网站上的可见按钮，当用户将鼠标移到该按钮上时，它会悬停在页面上并显示WhatsApp窗口打开的选项。

在这个介绍中，我们将讨论如何通过CSS和HTML创建WhatsApp悬停按钮。

HTML部分

首先，我们来编写HTML代码，它将创建WhatsApp悬停按钮。我们需要为WhatsApp按钮创建一个div元素，并在其中包含一个链接元素，该链接将WhatsApp网站的URL作为目标。

<div class="whatsapp">
  <a href="https://api.whatsapp.com/send?phone=PHONE_NUMBER" target="_blank">
    <i class="fa fa-whatsapp"></i>Send Message
  </a>
</div>

请注意，我们在链接元素的href属性中使用了WhatsApp API的URL，该URL包含用户的电话号码。我们还使用了Font Awesome库中的WhatsApp图标。此外，我们将整个WhatsApp悬停按钮包在一个class为“whatsapp”的div元素中。

CSS部分

现在，我们将编写一些CSS代码，使WhatsApp悬停按钮更具吸引力和交互性。我们将为div元素创建一个悬停效果，并添加一些样式来改变WhatsApp按钮的颜色和大小。

.whatsapp {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  transition: all 0.3s ease-in-out;
}

.whatsapp a {
  display: block;
  background-color: green;
  color: white;
  font-size: 20px;
  text-align: center;
  padding: 15px;
  text-decoration: none;
}

.whatsapp i {
  font-size: 24px;
  margin-right: 10px;
}

.whatsapp:hover {
  bottom: 60px;
}

在我们的CSS代码中，我们首先为div元素设置了position：fixed属性，这将使WhatsApp按钮始终保持在页面的右下角。我们还使用了z-index属性将WhatsApp按钮置于其他页面元素的前面。transition属性为WhatsApp按钮添加了平稳的移动效果。

对于链接元素，我们添加了背景颜色，前景颜色，字体大小，文本对齐，填充和文本装饰。我们还为WhatsApp图标定制了样式。最后，我们添加了一个:hover选项，使WhatsApp按钮在用户将鼠标悬停时向上移动。

结论

在本介绍中，我们学习了如何使用CSS和HTML创建WhatsApp悬停按钮。我们学习了如何使用WhatsApp API的URL和Font Awesome库的图标。我们还添加了样式来增强WhatsApp按钮的可视性和交互性。您可以根据需要调整颜色，大小和位置，从而创建一个完美的WhatsApp按钮，以增加您的在线营销策略的效果。