Create animated glowing buttons with CSS, that's how it works!


Share it: facebookTwitter | LinkedIn

Are you looking for a cool button animation? How about glowing buttons and some stylish CSS animations? In Pranjal Bhadu's code example on codepen.io you can experiment and marvel at an impressive example. Here in the editorial office, we particularly like the reflection effect. Nothing more than a line of CSS is required for this, but unfortunately not all browsers support it yet.

Pretty simple HTML-Markup

The HTML markup of the example is kept very simple. To achieve the effect of the animated edges, multiple SPAN tags are used within the A tags. There is nothing more to say about the HTML markup here.

<a href="#">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  Neon button
</a>
<a href="#">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  Neon button
</a>
<a href="#">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  Neon button
</a>

The original CSS code from Pranjal Bhadu

Here you can find the original CSS code of the example of Pranjal Bhadu.

We have replaced the CSS code with practical SCSS

We duplicated the pen on codepen.io and rewritten the CSS code in SCSS. So you can now play around with the colors. This approach would also be better in practice than coloring the buttons by changing the Hue filter. In our example, we omitted the Hue filter, but instead used a variable with which you can quickly change the colors of all buttons. We have also integrated a variable for the background. Interesting color combinations can be achieved quickly. Give it a try!

SCSS-Code "Black & Yellow" style ;-)

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;700&display=swap');

/* Variables for quick adjustment of the colors */
$bg-color: black;
$base-color: yellow;

/* Alignment of the buttons especially for the example */
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: $bg-color;
    font-family: sans-serif;
    font-size: 14px;
}

/* Global styles for all buttons */
a{
    position: relative;
    display: inline-block;
    padding: 25px 30px;
    margin: 40px 0;
    color: $base-color;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.5s;
    letter-spacing: 4px;
    overflow: hidden;
    margin-right: 50px;
    font-family: "Barlow", Arial, sans-serif;
	/* Create hover glow effect with CSS box-shadow */
    &:hover{
        background: $base-color;
        color: #050801;
        box-shadow: 0 0 5px $base-color,
                    0 0 25px $base-color,
                    0 0 50px $base-color,
                    0 0 200px $base-color;
		/* Create reflection effect with CSS box-reflect (Not supported by all browsers!) */
         -webkit-box-reflect:below 1px linear-gradient(rgba(0,0,0,0), $bg-color);
    }
    span{
        position: absolute;
        display: block;
		/* Adjusting animation parameters for each single SPAN tag */
        &:nth-child(1){
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg,transparent,$base-color);
            animation: animate1 1s linear infinite;
        }
        &:nth-child(2){
            top: -100%;
            right: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(180deg,transparent,$base-color);
            animation: animate2 1s linear infinite;
            animation-delay: 0.25s;
        }
        &:nth-child(3){
            bottom: 0;
            right: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(270deg,transparent,$base-color);
            animation: animate3 1s linear infinite;
            animation-delay: 0.50s;
        }
        &:nth-child(4){
            bottom: -100%;
            left: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(360deg,transparent,$base-color);
            animation: animate4 1s linear infinite;
            animation-delay: 0.75s;
        }
    }
}

/* Animation for first SPAN-Tag */
@keyframes animate1{
    0%{
        left: -100%;
    }
    50%,100%{
        left: 100%;
    }
}

/* Animation fro second SPAN-Tag */
@keyframes animate2{
    0%{
        top: -100%;
    }
    50%,100%{
        top: 100%;
    }
}

/* Animation for third SPAN-Tag */
@keyframes animate3{
    0%{
        right: -100%;
    }
    50%,100%{
        right: 100%;
    }
}

/* Animation for fourth SPAN-Tag */
@keyframes animate4{
    0%{
        bottom: -100%;
    }
    50%,100%{
        bottom: 100%;
    }
}

CSS reflections are not supported by all browsers!

Firefox does not yet support CSS reflections. Also Safari or Internet Explorer. For this it works amazingly in the Brave browser, which we use internally here. Anyway, here is an overview of CSS reflections on caniuse.com.

How do you like the effect?

Write your opinion in the comment section! How do you like the example? Do you have any suggestions or suggestions for improvement?

Finger pointing at you!

WE WANT YOU!

Your are a web design expert and you like writing articles?

JOIN US


Write comment

* These fields are required

Comments

No Comments


Share it: facebookTwitter | LinkedIn
100% anonymous web host