SVG button example code based on CSS animation

SVG button example code based on CSS animation

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

Recommend

Detailed explanation of how to mount remote file systems via SSH on Linux

Features of SSHFS: Based on FUSE (the best usersp...

MySQL 8.0.22 installation and configuration method graphic tutorial

This article records the installation and configu...

How to access the local machine (host machine) in Docker

Question How to access the local database in Dock...

How to use vue3 to build a material library

Table of contents Why do we need a material libra...

Using Zabbix to monitor the operation process of Oracle table space

0. Overview Zabbix is ​​an extremely powerful ope...

Two ways to export csv in win10 mysql

There are two ways to export csv in win10. The fi...

Nginx rewrite regular matching rewriting method example

Nginx's rewrite function supports regular mat...

IDEA configuration process of Docker

IDEA is the most commonly used development tool f...

Linux command line quick tips: How to locate a file

We all have files stored on our computers -- dire...

Can you do all the web page making test questions?

Web page design related questions, see if you can...

Pure CSS to achieve cloudy weather icon effect

Effect The effect is as follows ​ Implementation ...

Vue project @change multiple parameters to pass multiple events

First, there is only one change event. changeleve...

The difference between MySQL database host 127.0.0.1 and localhost

Many of my friends may encounter a problem and do...

Examples of some usage tips for META tags in HTML

HTML meta tag HTML meta tags can be used to provi...