分享个网站前端按钮代码

昨天在国外一网站看见的，本来想自己可能用到，但是暂时还没地方可以用。

css代码：

<style type="text/css"> 
.crunchify-social-deals {
    font-size: 15px;
}
.crunchify-social-deals ul {
    margin-left: 0px;
}
.post-tags-item {
    display: inline-block;
    margin: 9px 5px 7px 10px !important
}

.post-tag {
    color: #222;
    display: inline-block;
    border-right: 8px solid #2196f3;
    padding: 0px 16px 0px 17px;
    border-radius: 30px;
    border-bottom: 1px solid #ccc;
    transition: all .2s ease-in-out;
    box-shadow: rgba(0,0,0,0.15) 0 3px 15px;
    letter-spacing: 0em;
}

a.post-tag:hover {
    color: #fff;
    background: #2196f3;
    border-right-color: #64b5f6
}

a.post-tag:hover:before {
    border-right-color: #2196f3
}

.post-tag--design,a.post-tag--design:hover:before {
    border-right-color: #00bcd4
}

a.post-tag--design:hover {
    background: #00bcd4;
    border-right-color: #4dd0e1
}

.post-tag--green,.post-tag--tutorial,a.post-tag--green:hover:before,a.post-tag--tutorial:hover:before {
    border-right-color: #4caf50
}

a.post-tag--green:hover,a.post-tag--tutorial:hover {
    background: #4caf50;
    border-right-color: #81c784
}

.post-tag--grey,a.post-tag--grey:hover:before {
    border-right-color: #757575
}

a.post-tag--grey:hover {
    background: #757575;
    border-right-color: #9e9e9e
}

.post-tag--development,.post-tag--orange,a.post-tag--development:hover:before,a.post-tag--orange:hover:before {
    border-right-color: #ff9800
}

a.post-tag--development:hover,a.post-tag--orange:hover {
    background: #ff9800;
    border-right-color: #ffb74d
}

.post-tag--pink,.post-tag--review,a.post-tag--pink:hover:before,a.post-tag--review:hover:before {
    border-right-color: #e91e63
}

a.post-tag--pink:hover,a.post-tag--review:hover {
    background: #e91e63;
    border-right-color: #f06292
}
.crunchify-social-deals {
    font-size: 15px;
}
.crunchify-social-deals ul {
    margin-left: 0px;
}
.core-body {
    font-weight: 400 !important;
}
.comment-policy{
    overflow: hidden;
    margin-bottom: 30px;
    border-radius: 3px;
    font-size: 14px;
    line-height: 28px;
}
</style> 

html代码：

<div class="crunchify-social-deals hide-on-mobile"><ul>

      <li class="post-tags-item">
        <a target="_blank" href="https://crunchify.com/15-essential-settings-and-optimization-tasks-after-installing-wordpress/" class="post-tag post-tag--design">
          <span>Optimize WordPress</span>
        </a>
      </li>
      
    <li class="post-tags-item">
        <a target="_blank" href="https://crunchify.com/must-have-top-10-plugins-for-your-wordpress-blog/" class="post-tag post-tag--orange">
          <span>Plugins we use</span>
        </a>
      </li> 

      <li class="post-tags-item">
        <a target="_blank" href="https://crunchify.com/go/bluehost/" class="post-tag post-tag--journal">
          <span>Get FREE Domain & Hosting</span>
        </a>
      </li>    

      <li class="post-tags-item">
        <a target="_blank" href="https://crunchify.com/on-page-seo-rank-first-on-google/" class="post-tag post-tag--review">
          <span>Learn SEO</span>
        </a>
      </li> 

  </ul></div>

样子：