CSS代码:
.example {
width: 200px; height: 200px;
border: 0;
/* 外链文件也是支持的 */
/* background: url(icon-move-up.svg) no-repeat center / 100% 100%; */
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ctitle%3Emove-up%3C/title%3E%3Cpath d='M16.016 1.157l-15.015 15.015h9.009v16.016h12.012v-16.016h9.009z'%3E%3C/path%3E%3C/svg%3E") no-repeat center / 100% 100%;
transition: background-image 1s;
}
.example:hover,
.example:active {
/* 外链文件也是支持的 */
/* background-image: url(icon-move-down.svg); */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ctitle%3Emove-down%3C/title%3E%3Cpath d='M16.016 31.187l15.015-15.015h-9.009v-16.016h-12.012v16.016h-9.009z'%3E%3C/path%3E%3C/svg%3E");
}
HTML代码:
<button class="example"></button>