下载按钮的制作

HTML代码展示

<div class="downloadResume">
    <a class="download" href="./resume.pdf" target="_blank" download>下载PDF简历</a>
 </div>

css代码展示

body>main .downloadResume{
 text-align: center;
 margin:32px 0px;
 }
body>main .downloadResume .download{
     border:1px solid #CDCFD1;
     font-size:14px;
     color:#3d4451;
     font-weight: bold;
     display: inline-block;
     padding: 22px 56px;
     border-radius: 3px;
     background: #EFEFEF;
     transition: box-shadow 0.2s;
 }
body>main .downloadResume .download:hover{
    box-shadow: 0px 4px 10px 0px rgba(166,164,166,1);
 }   

下载按钮效果图

（1）因为a标签是内联元素，所以我们在加padding上下左右边距时候，只有宽度左右起了作用，高度是不会起作用的，所以样式需要增加display: inline-block;,才能设置高度变化的。

（2）下载按钮添加了阴影效果，灵活运用添加阴影工具进行调试。对下载按钮进行hover时， 增加了0.2s的阴影过渡效果transition: box-shadow 0.2s;
阴影工具地址：https://www.cssmatic.com/box-shadow