網頁側邊浮動按鈕怎麼做：LINE、電話、回到頂端、分享，純 HTML＋CSS

<nav class="float-buttons" aria-label="快速聯絡">
  <a class="float-btn float-line" href="https://line.me/R/ti/p/@你的LINE官方帳號ID" target="_blank" rel="noopener">
    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5h16v11H10l-5 4v-4H4z"/></svg>
    <span>LINE</span>
  </a>
  <a class="float-btn float-phone" href="tel:+886212345678">
    <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="7" y="2" width="10" height="20" rx="2"/><path d="M11 18h2"/></svg>
    <span>電話</span>
  </a>
  <button class="float-btn float-share" type="button">
    <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.7 13.5l6.6 4M15.3 6.5l-6.6 4"/></svg>
    <span>分享</span>
  </button>
  <a class="float-btn float-top" href="#">
    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
    <span>頂端</span>
  </a>
</nav>

.float-buttons {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.float-btn {
  --float-bg: #1e8a8a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--float-bg);
  color: #fff;
  font: inherit;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgb(0 0 0 / 20%);
}

.float-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.float-line { --float-bg: #2e9e4f; }
.float-phone { --float-bg: #ff6b35; }

/* 有些佈景主題會幫所有 <button> 設顏色，加 !important 才蓋得過 */
.float-buttons .float-btn {
  background-color: var(--float-bg) !important;
  color: #fff !important;
}

.float-btn:hover { filter: brightness(1.1); }
.float-btn:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }
.float-btn:focus:not(:focus-visible) { outline: none; }

.float-top {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
}
.float-top.is-visible {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 767px) {
  .float-buttons {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    transform: none;
    flex-direction: row;
    gap: 0;
    padding-bottom: env(safe-area-inset-bottom);
    background: #1e8a8a;
  }
  .float-btn {
    flex: 1;
    width: auto;
    height: 56px;
    border-radius: 0;
    box-shadow: none;
  }
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media print {
  .float-buttons { display: none; }
}

const floatTop = document.querySelector('.float-top');
const floatShare = document.querySelector('.float-share');

// 往下捲超過 600px 才顯示「回到頂端」
window.addEventListener('scroll', () => {
  floatTop.classList.toggle('is-visible', window.scrollY > 600);
}, { passive: true });

// 回到頂端：用程式捲上去，網址後面不會多一個 #
floatTop.addEventListener('click', (e) => {
  e.preventDefault();
  window.scrollTo({ top: 0 });
});

// 手機叫出系統分享選單；沒有分享功能的瀏覽器改成複製網址
floatShare.addEventListener('click', async () => {
  const data = { title: document.title, url: location.href };
  if (navigator.share) {
    try {
      await navigator.share(data);
    } catch (e) {
      // 使用者按了取消，不用處理
    }
    return;
  }
  try {
    await navigator.clipboard.writeText(location.href);
    floatShare.querySelector('span').textContent = '已複製';
    setTimeout(() => { floatShare.querySelector('span').textContent = '分享'; }, 2000);
  } catch (e) {
    prompt('請複製這個網址：', location.href);
  }
});

add_action( 'wp_footer', function () {
	?>
	<!-- 這裡貼上面的 HTML -->
	<script>
	// 這裡貼上面的 JavaScript
	</script>
	<?php
} );