网站各种按钮动态美化代码

一般博客网站的文章底部平时需要一些演示，下载的文件之类，都会做个下载，分享按钮方便使用。觉得还不错就分享出来。

效果图：

我这里提供完整代码就不拆分了，按钮文字你也可以自行更改，需要几个按钮，就复制或删除a标签。

博客使用：你直接复制css代码放置公共css中，将body中的div节点放到文章需要显示下载的地方即可。


<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>大雄搜集站 - soujiz.com</title>
  <style>
      .tp-down-box{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
      }
      .down-btn {
        letter-spacing: 0.1em;
        cursor: pointer;
        font-size: 14px;
        font-weight: 700;
        line-height: 45px;
        width: 23%;
        max-width: 160px;
        text-decoration: none;
        text-transform: uppercase;
        margin: 5px;
      }
      .down-btn:hover {
        text-decoration: none;
      }
      .tp-down-btn {
        --uismLinkDisplay: var(--smLinkDisplay, inline-flex);
        display: var(--uismLinkDisplay);
        color: #000;
        border: 2px solid #000;
        border-radius: 5px;
        position: relative;
        transition-duration: 0.4s;
        overflow: hidden;
        text-align: center;
      }
      .tp-down-btn::before,
      .tp-down-btn span{
        margin: 0 auto;
        transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
        transition-duration: 0.4s;
      }
      .tp-down-btn:hover{
        background-color: #000;
      }
      .tp-down-btn:hover span{
        -webkit-transform: translateY(-400%) scale(-0.1,20);
        transform: translateY(-400%) scale(-0.1,20);
      }
      .tp-down-btn::before{
        content: attr(data-sm-link-text);
        color: #FFF;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        -webkit-transform: translateY(500%) scale(-0.1,20);
        transform: translateY(500%) scale(-0.1,20);
      }
      .tp-down-btn:hover::before{
          letter-spacing: 0.05em;
          -webkit-transform: translateY(0) scale(1,1);
          transform: translateY(0) scale(1,1);
      }
      @media screen and (max-width: 1198px){
        .down-btn{
            width: 45%;
        }
      }
  </style>
</head>
<body>
    
    <div class="tp-down-box">
      <a href="https://soujiz.com/jishu" class="down-btn tp-down-btn" data-sm-link-text="网络技术" target="_blank"><span>蓝奏网盘</span></a>
      <a href="https://soujiz.com/zyfx" class="down-btn tp-down-btn" data-sm-link-text="资源分享" target="_blank"><span>天翼网盘</span></a>
      <a href="https://soujiz.com/tools" class="down-btn tp-down-btn" data-sm-link-text="工具软件" target="_blank"><span>百度网盘</span></a>
      <a href="https://soujiz.com/wzym" class="down-btn tp-down-btn" data-sm-link-text="网站源码" target="_blank"><span>源码下载</span></a>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>大雄搜集站 - soujiz.com</title>
  <style>
      .tp-down-box{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
      }
      .down-btn {
        letter-spacing: 0.1em;
        cursor: pointer;
        font-size: 14px;
        font-weight: 700;
        line-height: 45px;
        width: 23%;
        max-width: 160px;
        text-decoration: none;
        text-transform: uppercase;
        margin: 5px;
      }
      .down-btn:hover {
        text-decoration: none;
      }
      .tp-down-btn {
        --uismLinkDisplay: var(--smLinkDisplay, inline-flex);
        display: var(--uismLinkDisplay);
        color: #000;
        border: 2px solid #000;
        border-radius: 5px;
        position: relative;
        transition-duration: 0.4s;
        overflow: hidden;
        text-align: center;
      }
      .tp-down-btn::before,
      .tp-down-btn span{
        margin: 0 auto;
        transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
        transition-duration: 0.4s;
      }
      .tp-down-btn:hover{
        background-color: #000;
      }
      .tp-down-btn:hover span{
        -webkit-transform: translateY(-400%) scale(-0.1,20);
        transform: translateY(-400%) scale(-0.1,20);
      }
      .tp-down-btn::before{
        content: attr(data-sm-link-text);
        color: #FFF;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        -webkit-transform: translateY(500%) scale(-0.1,20);
        transform: translateY(500%) scale(-0.1,20);
      }
      .tp-down-btn:hover::before{
          letter-spacing: 0.05em;
          -webkit-transform: translateY(0) scale(1,1);
          transform: translateY(0) scale(1,1);
      }
      @media screen and (max-width: 1198px){
        .down-btn{
            width: 45%;
        }
      }
  </style>
</head>
<body>
    
    <div class="tp-down-box">
      <a href="https://soujiz.com/jishu" class="down-btn tp-down-btn" data-sm-link-text="网络技术" target="_blank"><span>蓝奏网盘</span></a>
      <a href="https://soujiz.com/zyfx" class="down-btn tp-down-btn" data-sm-link-text="资源分享" target="_blank"><span>天翼网盘</span></a>
      <a href="https://soujiz.com/tools" class="down-btn tp-down-btn" data-sm-link-text="工具软件" target="_blank"><span>百度网盘</span></a>
      <a href="https://soujiz.com/wzym" class="down-btn tp-down-btn" data-sm-link-text="网站源码" target="_blank"><span>源码下载</span></a>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>大雄搜集站 - soujiz.com</title>
	<style>
	    .tp-down-box{
	      width: 100%;
	      display: flex;
	      align-items: center;
	      justify-content: center;
	      flex-wrap: wrap;
	    }
	    .down-btn {
	      letter-spacing: 0.1em;
	      cursor: pointer;
	      font-size: 14px;
	      font-weight: 700;
	      line-height: 45px;
	      width: 23%;
	      max-width: 160px;
	      text-decoration: none;
	      text-transform: uppercase;
	      margin: 5px;
	    }
	    .down-btn:hover {
	      text-decoration: none;
	    }
	    .tp-down-btn {
	      --uismLinkDisplay: var(--smLinkDisplay, inline-flex);
	      display: var(--uismLinkDisplay);
	      color: #000;
	      border: 2px solid #000;
	      border-radius: 5px;
	      position: relative;
	      transition-duration: 0.4s;
	      overflow: hidden;
	      text-align: center;
	    }
	    .tp-down-btn::before,
	    .tp-down-btn span{
	      margin: 0 auto;
	      transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	      transition-duration: 0.4s;
	    }
	    .tp-down-btn:hover{
	      background-color: #000;
	    }
	    .tp-down-btn:hover span{
	      -webkit-transform: translateY(-400%) scale(-0.1,20);
	      transform: translateY(-400%) scale(-0.1,20);
	    }
	    .tp-down-btn::before{
	      content: attr(data-sm-link-text);
	      color: #FFF;
	      position: absolute;
	      left: 0;
	      right: 0;
	      margin: auto;
	      -webkit-transform: translateY(500%) scale(-0.1,20);
	      transform: translateY(500%) scale(-0.1,20);
	    }
	    .tp-down-btn:hover::before{
	        letter-spacing: 0.05em;
	        -webkit-transform: translateY(0) scale(1,1);
	        transform: translateY(0) scale(1,1);
	    }
	    @media screen and (max-width: 1198px){
	      .down-btn{
	          width: 45%;
	      }
	    }
	</style>
</head>
<body>
		
		<div class="tp-down-box">
		  <a href="https://soujiz.com/jishu" class="down-btn tp-down-btn" data-sm-link-text="网络技术" target="_blank"><span>蓝奏网盘</span></a>
		  <a href="https://soujiz.com/zyfx" class="down-btn tp-down-btn" data-sm-link-text="资源分享" target="_blank"><span>天翼网盘</span></a>
		  <a href="https://soujiz.com/tools" class="down-btn tp-down-btn" data-sm-link-text="工具软件" target="_blank"><span>百度网盘</span></a>
			<a href="https://soujiz.com/wzym" class="down-btn tp-down-btn" data-sm-link-text="网站源码" target="_blank"><span>源码下载</span></a>
		</div>
</body>
</html>

版权声明本站名称：大雄搜集站
本站永久网址：https://soujiz.com
1 本站资源大多存储在云盘，如有链接失效，请留言反馈站长更新！
2 本站各种资源及源码软件大部分为网络搜集而来，如有侵犯版权的，请邮件与我们联系，本站将予以改正。
3 由于网络资源有极快的复制性，付费资源一经购买，不以任何形式退款，购买过程中如有付费资源失效，请及时联系站长。

THE END