html - HTML & CSS：按钮上的文本

Question

我的个人网站主页上有一个社交媒体按钮。实际上它工作得很好，但是当我尝试在按钮上添加文本（例如，FOLLOW）时，文本层使它无法点击。我的代码没有涉及 JS 函数。我怎么解决这个问题？

提前致谢。

编辑：添加了 CSS 代码。

编辑＃2：感谢您的所有答案。但是，<button>在这种情况下，标签和 JS 代码对我不起作用。height我终于设法通过从类中删除和width属性来减少文本层区域.social-text，现在文本不会影响按钮功能。它仍然与按钮重叠，但面积最小，不会再引起问题。我正在添加固定按钮的屏幕截图。快乐编码！

HTML：

         <div>
       
         <ul id="menu">
        
             <a class="menu-button icon-plus" href="#menu" title="Show navigation"></a>
             <a class="menu-button icon-minus" href="#0" title="Hide navigation"></a>
             
             <li class="menu-item">
                 <a href="https://www.instagram.com" target="_blank">
                     <span class="fa fa-instagram"></span>
                 </a>
             </li>
             <li class="menu-item">
                 <a href="https://www.facebook.com" target="_blank">
                     <span class="fa fa-facebook"></span>
                 </a>
             </li>
             <li class="menu-item">
                 <a href="https://twitter.com" target="_blank">
                     <span class="fa fa-twitter"></span>
                 </a>
             </li>
             <li class="menu-item">
                 <a href="https://linkedin.com/in" target="_blank">
                     <span class="fa fa-linkedin"></span>
                 </a>
             </li>
         </ul>
         <span class="social-text">FOLLOW</span>
         </div>

CSS：

    #menu {
     text-align: center;
     width: 11vw;
     height: 11vw;
     position: absolute;
     left: 50%;
     top: 23vw;
     margin-left: 23vw;
     margin-top: 6vw;
     list-style: none;
     font-size: 2.5vw;
   }

    .menu-button {
     opacity: 0;
     z-index: -1;
    }
         
    .menu-button {
      width: 11vw;
      height: 11vw;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -5.8vw 0 0 -5.8vw;
      border-radius: 50%;
      background: #424242;
      background-size: 100%;
      overflow: hidden;
      text-decoration: none;
     }

     #menu:not(:target)>a:first-of-type,
     #menu:target>a:last-of-type {
      opacity: 1;
      z-index: 1;
     }

     #menu:not(:target)>.icon-plus:before, 
     #menu:target>.icon-minus:before {
       opacity: 1;
     }

     .menu-item {
        width: 5.5vw;
        height: 5.5vw;
        position: absolute;
        left: 55%;
        line-height: 1vw;
        top: 70%;
        margin: -3.9vw 0 0 -3.9vw;
        border-radius: 50%;
        background-color: #424242;
        transform: translate(0vw, 0vw);
        transition: transform 500ms;
        z-index: -2;        
        transition: .5s;
       }

       .menu-item:hover{
         opacity: 0.5;
         box-shadow: 0 0.4vw 0.8vw black; 
        }


      .menu-item a {
         color: #fff;
         position: relative;
         top: 30%;
         left: 0;
         text-decoration: none;
       }

      #menu:target>.menu-item:nth-child(6) {
        transform: rotate(60deg) translateY(-11.7vw) rotate(300deg);
        transition-delay: 0s;
      }

      #menu:target>.menu-item:nth-child(5) {
        transform: rotate(20deg) translateY(-12.1vw) rotate(-20deg);
        transition-delay: 0.1s;
      }

     #menu:target>.menu-item:nth-child(3) {
       transform: rotate(-20deg) translateY(-12.1vw) rotate(20deg);
       transition-delay: 0.2s;
     }

     #menu:target>.menu-item:nth-child(4) {
       transform: rotate(-60deg) translateY(-11.7vw) rotate(60deg);
       transition-delay: 0.3s;
     }

     .social-text {
       text-align: center;
       width: 11vw;
       height: 11vw;
       position: absolute;
       left: 50%;
       top: 23vw;
       margin-left: 23vw;
       margin-top: 6vw;
       z-index: 2;

    } 

标签： htmlcssbutton

Answer 1

您可以尝试使用<button>

const btn = document.getElementById("btn-follow");

btn.addEventListener("click", () => {
  console.log("followed");
});

<button id="btn-follow">FOLLOW</button>

或者你可以添加一个role="button"到你的跨度标签

const span = document.getElementById("span-follow");

span.addEventListener("click", () => {
  console.log("followed");
});

<span id="span-follow" role="button">FOLLOW</span>

如果你想创建一个圆形按钮，你可以用 a 创建一个圆形<div>并像使用它一样使用它<button>

const btn = document.getElementById("btn-follow");

btn.addEventListener("click", () => {
  console.log("followed");
});

.social-circle {
  text-align: center;
  width: 11vw;
  height: 11vw;
  line-height: 11vw;
  border-radius: 50%;
  background: #F77;
}

.social-text {
  color: #fff;
}

.cursor-pointer {
  cursor: pointer;
}

<div class="social-circle cursor-pointer" id="btn-follow" role="button">
  <span class="social-text" role="button">FOLLOW</span>
</div>