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

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

效果图：

我这里提供完整代码就不拆分了，按钮文字你也可以自行更改，需要几个按钮，就复制或删除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>

感谢您的来访，获取更多精彩文章请收藏本站。

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

THE END