Question

我一直在网上搜索一些说明，说明如何使社交图标可点击，但我似乎找不到答案。我喜欢在我的博客中添加一些带有以下代码的图标：

 .social-wrap {
          width: 325px;
          height: 50px;
          position: absolute;
          top: 50%;
          left: 50%;
          margin: -25px 0 0 -162.5px;
        }
        .social-wrap button {
          border: none;
          outline: none;
          width: 50px;
          height: 50px;
          font-size: 1.25em;
          transition: color .25s ease-out, background .25s ease-out, border-radius .25s ease-out;
          box-shadow: 0px 27px 73px -10px rgba(0, 0, 0, 0.75);
        }
        .social-wrap button:hover {
          cursor: pointer;
          border-radius: 50px;
          box-shadow: 0px 27px 45px -10px rgba(0, 0, 0, 0.75);
        }
        .social-wrap .facebook {
          color: #3b5998;
          background-color: #fff;
        }
        .social-wrap .facebook:hover {
          color: #fff;
          background-color: #3b5998;
        }
        .social-wrap .facebook:active {
          background-color: #fff;
          color: #3b5998;
        }
        .social-wrap .twitter {
          color: #00aced;
          background-color: #fff;
        }
        .social-wrap .twitter:hover {
          color: #fff;
          background-color: #00aced;
        }
        .social-wrap .twitter:active {
          background-color: #fff;
          color: #00aced;
        }
        .social-wrap .google-plus {
          color: #dd4b39;
          background-color: #fff;
        }
        .social-wrap .google-plus:hover {
          color: #fff;
          background-color: #dd4b39;
        }
        .social-wrap .google-plus:active {
          background-color: #fff;
          color: #dd4b39;
        }

  <div class='social-wrap'>
    <button class='facebook'>
      <i class='fa fa-facebook'></i>
    </button>
    <button class='twitter'>
      <i class='fa fa-twitter'></i>
    </button>
    <button class='google-plus'>
      <i class='fa fa-google-plus'></i>
    </button>
 </div>

如何使其可点击？我尝试插入按钮标签，但它给我一些错误“ Illegal nesting: nesting within plain text is illegal.”。请给我一些想法。 TIA

Answer 1

您应该能够将href属性设置为相应链接的<i>标签中的<a>标签包装起来：

<a href="your-link-here">
    <i class='fa fa-facebook'></i>
</a>

如果还需要单击按钮，甚至可以将按钮包装在<a>标记中。

Answer 2

一个简单的解决方法是用锚标记<a>包围按钮并添加其href属性。

.social-wrap {
  width: 325px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -162.5px;
}

.social-wrap button {
  border: none;
  outline: none;
  width: 50px;
  height: 50px;
  font-size: 1.25em;
  transition: color .25s ease-out, background .25s ease-out, border-radius .25s ease-out;
  box-shadow: 0px 27px 73px -10px rgba(0, 0, 0, 0.75);
}

.social-wrap button:hover {
  cursor: pointer;
  border-radius: 50px;
  box-shadow: 0px 27px 45px -10px rgba(0, 0, 0, 0.75);
}

.social-wrap .facebook {
  color: #3b5998;
  background-color: #fff;
}

.social-wrap .facebook:hover {
  color: #fff;
  background-color: #3b5998;
}

.social-wrap .facebook:active {
  background-color: #fff;
  color: #3b5998;
}

.social-wrap .twitter {
  color: #00aced;
  background-color: #fff;
}

.social-wrap .twitter:hover {
  color: #fff;
  background-color: #00aced;
}

.social-wrap .twitter:active {
  background-color: #fff;
  color: #00aced;
}

.social-wrap .google-plus {
  color: #dd4b39;
  background-color: #fff;
}

.social-wrap .google-plus:hover {
  color: #fff;
  background-color: #dd4b39;
}

.social-wrap .google-plus:active {
  background-color: #fff;
  color: #dd4b39;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='social-wrap'>
   <a href="http://www.facebook.com"><button class='facebook'>
      <i class='fa fa-facebook'></i>
   </button></a>
   <a href="http://www.twitter.com"><button class='twitter'>
      <i class='fa fa-twitter'></i>
    </button></a>
   <a href="http://www.google.com"><button class='google-plus'>
      <i class='fa fa-google-plus'></i>
    </button></a>
</div>

Answer 3

将其括在锚标签而不是按钮标签中，然后将锚标签的样式设置为类似于按钮。

<a class="facebook button" href="https://facebook.com/">
  <i class='fa fa-facebook'></i>
</a>

在样式表中更改

.social-wrap button至.social-wrap .button

和

.social-wrap button:hover至.social-wrap .button:hover

（“按钮”中“ b”之前的时段）

使社交图标可点击

3 个答案: