HTML and CSS learning --- (13)

Introduction
glowing gradient button
Code

html file

css file

Introduction

! [Alt]
(https://yt3.ggpht.com/a/AGF-l7_JOPbXWp3QXZDuk7CCOzxdwpRg8MFJliMx5A=s900-ck-c0xffffffff-no-rj-mo0)
this learning resource from a youtuber open channel, called the online tutorial (https : //www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog/featured), from among the system pushed me he has no intention of channels for the first time I was sent some of his own css style attracted, but also so as this platform to share with you some of the learning resources useful.

glowing gradient button

Here Insert Picture Description

Code

html file

<body>
    <a href="#">Button</a>

</body>

css file

body {
    margin: 0;
    padding: 0;
    background: #000;
}

a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: #fff;
    font-size: 24px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: sans-serif;
    box-sizing: border-box;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
}

This code is mainly to do is set the length and width of the text box is displayed in a central location, more special is set to the background, background color conversion mode is set, background-size for the background image size setting.

The second step is a: hover set of

a:hover {
    animation: animate 8s linear infinite;
}

@keyframes animate {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 400%;
    }
}

The main intention is to move the current background hover a time

Finally, it is provided a light emitting material, the same principle is further provided a shape of a generic, it will be placed in a below, called a: before

a:before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 40px;
    opacity: 0;
    transition: 0.5s;
}

a:hover::before {
    filter: blur(20px);
    opacity: 1;
    animation: animate 8s linear infinite;
}

Before this element has the same length and a width, to be noted that, because there is a need to set the emitter periphery, so we use the top, bottom, left, right are set to negative, this point of reference is the a set of the box itself, therefore, is the last peripheral 5px; the final step is to set it before the change when hover elements of the elements of a future, so that we become her from transparent and non-transparent and animation settings as before, but this we use the filter is starting to show the effects of light.

The share ended the matter, I hope you like :)

I have attitude

Published 14 original articles · won praise 0 · Views 114

Private letter concerns