WordPress 自定义下载按钮带图标交互响应效果

只需要再WordPress后台主题文件：style.css中最后位置，

添加文末网盘中下载到的代码，即可实现图片中的效果。

效果演示，见以下链接下载处看查看。

http://v.s3.sh.cn/archives/758.html

style.css代码添加后，编辑文章时，只需要以下代码即可实现上图效果。

其中图片位置找到32*32的SVG可以进行替换。

<div class="i-down-box">
<a href="https://pan.baidu.com/s/18SOS7humoxViqF8iU-wdww?pwd=S3SH" class="idown-btn i-idown-btn" data-text="点击下载" target="_blank">
<svg t="1746284024400" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2799" data-spm-anchor-id="a313x.search_index.0.i2.c7bf3a81YnvBly" width="32" height="32"><path d="M292.571429 435.931429c-1.462857-11.702857-2.925714-24.868571-2.925715-38.034286C289.645714 275.017143 389.12 175.542857 512 175.542857c122.88 0 222.354286 99.474286 222.354286 223.817143 0 13.165714-1.462857 24.868571-2.925715 38.034286 112.64 0 204.8 92.16 204.8 206.262857 0 112.64-92.16 204.8-206.262857 204.8-57.051429 0-109.714286-23.405714-146.285714-61.44-19.017143-20.48-19.017143-52.662857 0-71.68 20.48-20.48 52.662857-20.48 71.68 0l1.462857 1.462857c19.017143 17.554286 43.885714 29.257143 71.68 29.257143 57.051429 0 103.862857-46.811429 103.862857-103.862857 0-57.051429-46.811429-103.862857-103.862857-103.862857-26.331429 0-49.737143 10.24-68.754286 26.331428l-1.462857 1.462857-5.851428 5.851429-4.388572 4.388571-207.725714 210.651429c-38.034286 38.034286-89.234286 61.44-146.285714 61.44C179.931429 848.457143 87.771429 756.297143 87.771429 642.194286c0-112.64 90.697143-204.8 204.8-206.262857m1.462857 310.125714c57.051429 0 103.862857-46.811429 103.862857-103.862857 0-57.051429-46.811429-103.862857-103.862857-103.862857-57.051429 0-103.862857 46.811429-103.862857 103.862857 0 57.051429 46.811429 103.862857 103.862857 103.862857M512 520.777143c67.291429 0 121.417143-54.125714 121.417143-121.417143 0-67.291429-54.125714-121.417143-121.417143-121.417143-67.291429 0-121.417143 54.125714-121.417143 121.417143 0 65.828571 54.125714 121.417143 121.417143 121.417143" fill="#06A7FF" p-id="2800"></path><path d="M631.954286 412.525714v-5.851428c0-27.794286 23.405714-51.2 51.2-51.2s51.2 23.405714 51.2 51.2v5.851428c-7.314286 117.028571-103.862857 209.188571-222.354286 209.188572s-215.04-92.16-222.354286-209.188572v-5.851428c0-27.794286 23.405714-51.2 51.2-51.2s51.2 23.405714 51.2 51.2v5.851428c5.851429 61.44 58.514286 108.251429 119.954286 108.251429 62.902857 0 114.102857-46.811429 119.954286-108.251429" fill="#FF436A" p-id="2801"></path></svg>
<span>百度网盘</span></a>