The specific code is as follows: <a href="#"> <svg> <rect></rect> Button </a> body { margin: 0; padding: 0; background: #000; } a { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 60px; line-height: 60px; text-align: center; font-family: sans-serif; text-transform:uppercase; font-size: 24px; letter-spacing: 4px; color: #fff; text-decoration: none; } a svg, a svg rect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; fill: transparent; } a { svg rect { stroke: #00e2ff; stroke-width: 4; transition: 2s; stroke-dasharray: 60 200; stroke-dashoffset: 320; } &:hover { svg rect { stroke: #ff0; stroke-dasharray: 200 60; stroke-dashoffset: 0; } } } Summarize The above is the SVG button based on CSS animation introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: Specific use of MySQL segmentation function substring()
>>: JavaScript to achieve lottery effect
Features of SSHFS: Based on FUSE (the best usersp...
This article records the installation and configu...
Question How to access the local database in Dock...
Table of contents Why do we need a material libra...
0. Overview Zabbix is an extremely powerful ope...
There are two ways to export csv in win10. The fi...
Nginx's rewrite function supports regular mat...
IDEA is the most commonly used development tool f...
We all have files stored on our computers -- dire...
Web page design related questions, see if you can...
Effect The effect is as follows Implementation ...
First, there is only one change event. changeleve...
Many of my friends may encounter a problem and do...
Preface: This article only introduces the steps t...
HTML meta tag HTML meta tags can be used to provi...