How to Create Neon Blue Box + Button + Icon Animation in Elementor (With CSS)

Are you looking to make your Elementor website stand out with a glowing, futuristic design? In this tutorial, we’ll show you how to create a Neon Blue Box with Button and Icon Animation using Elementor and simple CSS. This effect looks amazing for hero sections, service boxes, or call-to-action areas.

---

⚙️ What You’ll Learn

• How to design a Neon Blue Glowing Box
• Add a Font Awesome Icon with animation
• Create a hover glowing button
• Apply custom CSS for smooth light effects

---

🧱 Step 1: Create the Box in Elementor

1. Open your page in Elementor.
2. Drag a “Heading,” “Text Editor,” “Button,” and “Icon” widget into one column.
3. Or, if you prefer, use a single HTML widget and paste this code below.

Step 1: Add the Custom CSS

Go to the section or column → Advanced → Custom CSS and paste the code below:

/* Neon Blue Box + Button + Icon Animation */
.neon-box {
background: #0a0a0a;
border: 2px solid #00b7ff;
box-shadow: 0 0 15px #00b7ff, 0 0 40px #00b7ff;
border-radius: 15px;
text-align: center;
padding: 50px 20px;
color: #fff;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}

.neon-box:hover {
box-shadow: 0 0 25px #00b7ff, 0 0 60px #00b7ff;
transform: scale(1.03);
}

/* Icon Style */
.neon-box i {
font-size: 50px;
color: #00b7ff;
text-shadow: 0 0 10px #00b7ff, 0 0 20px #00b7ff;
animation: glowPulse 2s infinite alternate;
}

@keyframes glowPulse {
0% { text-shadow: 0 0 10px #00b7ff; }
100% { text-shadow: 0 0 30px #00b7ff; }
}

/* Heading */
.neon-box h2 {
font-size: 28px;
margin: 20px 0 10px;
text-shadow: 0 0 10px #00b7ff;
}

/* Paragraph */
.neon-box p {
font-size: 16px;
color: #ccc;
margin-bottom: 30px;
}

/* Button */
.neon-btn {
display: inline-block;
padding: 12px 25px;
color: #00b7ff;
border: 2px solid #00b7ff;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
transition: all 0.3s ease;
box-shadow: 0 0 10px #00b7ff;
}

.neon-btn:hover {
background: #00b7ff;
color: #0a0a0a;
box-shadow: 0 0 20px #00b7ff, 0 0 40px #00b7ff;
}

Adjust Design (Optional)

• Change the neon color: Replace #00b7ff with any other glow color (like pink #ff00ff or green #00ff88).
• Add gradient backgrounds for a more futuristic look.
• Use Elementor motion effects for extra animations.

---

🎬 Step 2: Watch Full Tutorial (YouTube)

🎥 Watch the full video tutorial:
👉 Neon Blue Box + Button + Icon Animation in Elementor | Glowing Effect CSS

(You can embed your YouTube video here using the Elementor video widget or the WordPress block editor.)

---

🧠 Final Thoughts

This Neon Blue Box Animation adds a modern, glowing vibe to any website section. Whether you’re designing for tech, gaming, or creative portfolios — it’s a great way to catch your visitor’s attention!

Try experimenting with colors, shadows, and speeds to match your brand’s style.