Neon Light Button Animation Effects on Hover

Updated on: May 20, 2024

To install this modification you will need the Divi Theme by Elegant Themes installed.

  • You can follow this step by step tutorial or you can purchase ready to import button section below.

In this tutorial I will show you how to create a neon glowing animation button in Divi. We are going to use only Divi button module for this build, however we will write some custom CSS and jQuery to be able to achieve create the effects.

Live Preview
Buy Now

Add Rows, Modules and Classes

We are on the demo page now and let’s start by adding rows and modules first. Then we will be add css “divi-neon-button” to row and two button modules. Now open your design in wireframe view.

  1. Add Standard Section and select Single Column layout for our heading area.
  2. Add two Button Modules.

At this point your wireframe should look like the one on picture below.

Now go to the Row Settings > Advanced > CSS Class and add class divi-neon-button.

Adding CSS into your Child Theme or Theme Option

Now we need to add neon button CSS to Divi > Theme Options > General > Custom CSS section or copy and paste it to our child theme’s style.css file.

/*------------------------------------------------*/
/*---------------[Divi Neon Button]---------------*/
/*------------------------------------------------*/ 
.divi-neon-button .et_pb_button.et_pb_bg_layout_light,
.divi-neon-button .et_pb_button.et_pb_bg_layout_dark{
    position: relative;
    display: inline-block;
    padding: 0.9rem 1.8rem !important;
    text-transform: uppercase;
    font-size: 1rem;
    overflow: hidden;
    color: #21252d !important;
    background-color: #ffe09480;
    margin: 0.625rem;
    border: none;
	border-radius: 0.1875rem;
}
.divi-neon-button .et_pb_button.et_pb_bg_layout_light:hover,
.divi-neon-button .et_pb_button.et_pb_bg_layout_dark:hover{
    box-shadow: 0 0 10px #ffe094, 0 0 40px #ffe094, 0 0 80px #ffe094;
    transition-delay: 0.45s;
    background-color: #ffe09480;
    padding: 0.9rem 1.8rem !important;
    border: none;  
	color: #21252d !important;
}
.divi-neon-button .et_pb_button::after{
    display: none;
}
.divi-neon-button a {
		text-align: center;
}
.divi-neon-button a span{
	position: absolute;
	display: block;
}
.divi-neon-button a span:nth-child(1){
	top:0;
	left:-100%;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent, #21252d);
}
.divi-neon-button a:hover span:nth-child(1){
	left: 100%;
	transition: 0.25s;
}
.divi-neon-button a span:nth-child(2){
	top:-100%;
	right: 0;
	width: 2px;
	height: 100%;
	background: linear-gradient(180deg, transparent, #21252d);
}
.divi-neon-button a:hover span:nth-child(2){
	top: 100%;
	transition: 0.25s;
	transition-delay: 0.15s;
}
.divi-neon-button a span:nth-child(3){
	bottom:0;
	right:-100%;
	width: 100%;
	height: 2px;
	background: linear-gradient(270deg, transparent, #21252d);
}
.divi-neon-button a:hover span:nth-child(3){
	right: 100%;
	transition: 0.25s;
	transition-delay: 0.3s;
}
.divi-neon-button a span:nth-child(4){
	bottom:-100%;
	left: 0;
	width: 2px;
	height: 100%;
	background: linear-gradient(360deg, transparent, #21252d);
}
.divi-neon-button a:hover span:nth-child(4){
	bottom: 100%;
	transition: 0.25s;
	transition-delay: 0.45s;
}

Adding jQuery to your Divi site

In this last step we need to add jQuery below to Divi > Theme Options > Integration > <body> section or second option is to copy snippet inside the code module in Divi builder.

<script>
$(document).ready(function() {
    // Select the anchor tag with class 'et_pb_button' inside an element with class 'divi-neon-button'
    $('.divi-neon-button .et_pb_button').each(function() {
        // Append up to 4 <span></span> elements after the text inside the selected anchor tag
        for (let i = 0; i < 4; i++) {
            $(this).append('<span></span>');
        }
    });
});
</script>

Optional CSS – Used in video tutorial to achieve exactly the same look

/*------------------------------------------------*/
/*----------[Place Divi Buttons Inline]-----------*/
/*------------------------------------------------*/ 
.sk-inline-buttons .et_pb_button_module_wrapper {
    display: inline-block;
    margin: 0px 20px 0px 0px;
}
.sk-inline-center {
    text-align: center;
}
.sk-inline-left {
    text-align: left;
}