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

How to use Dockerfile to create a mirror of the Java runtime environment

The current environment is: Centos 7.5 docker-ce ...

Vue integrates Tencent TIM instant messaging

This article mainly introduces how to integrate T...

Pure CSS to change the color of the picture

The css technique for changing the color of an im...

Introduction to document.activeELement focus element in JavaScript

Table of contents 1. The default focus is on the ...

How to create a responsive column chart using CSS Grid layout

I have been playing around with charts for a whil...

Windows 10 is too difficult to use. How to customize your Ubuntu?

Author | Editor Awen | Produced by Tu Min | CSDN ...

The main differences between MySQL 4.1/5.0/5.1/5.5/5.6

Some command differences between versions: show i...

Solution to the problem that mysql local login cannot use port number to log in

Recently, when I was using Linux to log in locall...

What is the base tag and what does it do?

The <base> tag specifies the default addres...

Summary of Vue first screen performance optimization component knowledge points

Vue first screen performance optimization compone...

HTML basics HTML structure

What is an HTML file? HTML stands for Hyper Text M...

Using JavaScript to implement carousel effects

This article shares the specific code for JavaScr...

Specific use of Linux gcc command

01. Command Overview The gcc command uses the C/C...