Qaid AID.DEV
ARTICLE

Custom CSS Magic: Advanced Styling Techniques

Go beyond themes with custom CSS. Learn to create unique feedback button designs with animations, gradients, and creative effects.

Qaid Team

You’ve seen our built-in themes. You’ve mastered color matching. Now it’s time to push the boundaries of what’s possible with custom CSS. In this guide, we’ll explore advanced techniques to create feedback buttons that are truly one-of-a-kind.

The Foundation: Understanding Button Structure

Before we get creative, let’s understand what we’re styling. A Qaid button has this structure:

<button class="qaid-btn-structural qaid-btn-up your-custom-class">
  <svg class="qaid-icon">...</svg>
</button>

The key classes:

  • qaid-btn-structural: Base layout (flex, centering)
  • qaid-btn-up / qaid-btn-down: Identifies the button type
  • Your custom class: Where your magic happens

Glassmorphism Effect

The glassmorphism trend creates depth through transparency and blur. Let’s implement it:

Glassmorphism

Frosted glass effect with backdrop blur

Loading embed...
 
.qaid-glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 14px;
  color: white;
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.qaid-glass:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.qaid-glass.qaid-btn-up:hover {
  box-shadow: 0 12px 40px rgba(74, 222, 128, 0.3);
}

.qaid-glass.qaid-btn-down:hover {
  box-shadow: 0 12px 40px rgba(248, 113, 113, 0.3);
}

The backdrop-filter: blur() creates the frosted effect. The semi-transparent background lets the blur show through while maintaining button visibility.

Neumorphism (Soft UI)

Neumorphism creates the illusion of buttons extruding from or pressed into the surface:

Neumorphism

Soft, extruded button effect

Loading embed...
 
.qaid-neumorph {
  background: #e0e5ec;
  border: none;
  border-radius: 20px;
  padding: 16px;
  color: #6b7280;
  transition: all 0.2s ease;
  box-shadow:
    8px 8px 16px #b8bcc2,
    -8px -8px 16px #ffffff;
}

.qaid-neumorph:hover {
  box-shadow:
    4px 4px 8px #b8bcc2,
    -4px -4px 8px #ffffff;
}

.qaid-neumorph:active {
  box-shadow:
    inset 4px 4px 8px #b8bcc2,
    inset -4px -4px 8px #ffffff;
}

.qaid-neumorph.qaid-btn-up {
  color: #10b981;
}

.qaid-neumorph.qaid-btn-down {
  color: #ef4444;
}

The dual shadows (one dark, one light) create the 3D effect. On hover, the shadows shrink. On active, they invert to create a pressed appearance.

Animated Gradient Border

Let’s create buttons with animated gradient borders:

Animated Gradient Border

Rainbow border animation on hover

Loading embed...
 
.qaid-gradient-border {
  position: relative;
  background: #1a1a1a;
  border: none;
  border-radius: 12px;
  padding: 14px;
  color: white;
  z-index: 1;
  transition: all 0.3s ease;
}

.qaid-gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  background: linear-gradient(45deg, #ff0080, #ff8c00, #40e0d0, #ff0080);
  background-size: 300% 300%;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.qaid-gradient-border::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #1a1a1a;
  border-radius: 12px;
  z-index: -1;
}

.qaid-gradient-border:hover::before {
  opacity: 1;
  animation: gradient-rotate 2s linear infinite;
}

@keyframes gradient-rotate {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

The trick is using ::before for the gradient border and ::after to mask the interior. The animation shifts the gradient position for that flowing effect.

Pulse Ripple Effect

For a truly memorable interaction, let’s add expanding rings:

Pulse Ripple Effect

Expanding ring animation on interaction

Loading embed...
 
.qaid-ripple {
  position: relative;
  background: #2a2a4a;
  border: 2px solid #4a4a6a;
  border-radius: 50%;
  padding: 14px;
  color: white;
  overflow: visible;
  transition: all 0.3s ease;
}

.qaid-ripple::before,
.qaid-ripple::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0;
}

.qaid-ripple:hover::before {
  animation: ripple-out 1s ease-out infinite;
}

.qaid-ripple:hover::after {
  animation: ripple-out 1s ease-out 0.3s infinite;
}

.qaid-ripple.qaid-btn-up {
  color: #00ff88;
  border-color: #00ff8844;
}

.qaid-ripple.qaid-btn-down {
  color: #ff4466;
  border-color: #ff446644;
}

@keyframes ripple-out {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

Two pseudo-elements animate outward with a staggered delay, creating a sonar-like pulse effect.

Retro Pixel Art Style

For gaming sites or nostalgic vibes, a pixel art aesthetic:

Retro Pixel Art

8-bit gaming aesthetic

Loading embed...
 
.qaid-pixel {
  background: #4ade80;
  border: none;
  padding: 12px 16px;
  color: #000;
  image-rendering: pixelated;
  box-shadow:
    4px 0 0 #000,
    -4px 0 0 #000,
    0 4px 0 #000,
    0 -4px 0 #000,
    4px 4px 0 #000,
    -4px 4px 0 #000,
    4px -4px 0 #000,
    -4px -4px 0 #000,
    0 8px 0 #166534;
  transition: all 0.1s ease;
}

.qaid-pixel:hover {
  transform: translateY(-2px);
  box-shadow:
    4px 0 0 #000, -4px 0 0 #000,
    0 4px 0 #000, 0 -4px 0 #000,
    4px 4px 0 #000, -4px 4px 0 #000,
    4px -4px 0 #000, -4px -4px 0 #000,
    0 10px 0 #166534;
}

.qaid-pixel:active {
  transform: translateY(2px);
  box-shadow:
    4px 0 0 #000, -4px 0 0 #000,
    0 4px 0 #000, 0 -4px 0 #000,
    4px 4px 0 #000, -4px 4px 0 #000,
    4px -4px 0 #000, -4px -4px 0 #000,
    0 4px 0 #166534;
}

.qaid-pixel.qaid-btn-down {
  background: #f87171;
  box-shadow:
    4px 0 0 #000, -4px 0 0 #000,
    0 4px 0 #000, 0 -4px 0 #000,
    4px 4px 0 #000, -4px 4px 0 #000,
    4px -4px 0 #000, -4px -4px 0 #000,
    0 8px 0 #991b1b;
}

Multiple box-shadows at pixel offsets create that classic 8-bit look. The darker shadow at the bottom creates depth.

Morphing Icon Animation

Change the icon shape on hover:

Icon Morph Effect

Icons scale and rotate on hover

Loading embed...
 
.qaid-morph {
  background: linear-gradient(135deg, #3b3b3b 0%, #2a2a2a 100%);
  border: 1px solid #444;
  border-radius: 12px;
  padding: 14px;
  color: #888;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.qaid-morph .qaid-icon {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.qaid-morph:hover {
  border-color: currentColor;
}

.qaid-morph:hover .qaid-icon {
  transform: scale(1.2) rotate(10deg);
}

.qaid-morph.qaid-btn-up {
  color: #4ade80;
}

.qaid-morph.qaid-btn-up:hover {
  background: linear-gradient(135deg, #166534 0%, #14532d 100%);
  box-shadow: 0 0 20px rgba(74, 222, 128, 0.3);
}

.qaid-morph.qaid-btn-down {
  color: #f87171;
}

.qaid-morph.qaid-btn-down:hover {
  background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%);
  box-shadow: 0 0 20px rgba(248, 113, 113, 0.3);
}

A subtle rotation combined with scale creates engaging movement without being distracting.

Performance Considerations

When creating complex animations:

  1. Use transform and opacity for animations—they’re GPU-accelerated
  2. Avoid animating box-shadow extensively—it’s expensive to repaint
  3. Use will-change sparingly for elements that will animate
  4. Test on mobile devices where GPU power is limited
.qaid-optimized {
  will-change: transform;
  transform: translateZ(0); /* Force GPU acceleration */
}

Combining Techniques

The best custom designs often combine multiple techniques:

Combined Techniques

Glass + gradient + animation

Loading embed...
 
.qaid-ultimate {
  position: relative;
  background: rgba(30, 30, 30, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 16px;
  color: white;
  overflow: hidden;
  transition: all 0.4s ease;
}

.qaid-ultimate::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background: conic-gradient(from 0deg, #ff0080, #ff8c00, #40e0d0, #8b5cf6, #ff0080);
  z-index: -2;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: spin 3s linear infinite;
}

.qaid-ultimate::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: rgba(20, 20, 20, 0.95);
  border-radius: 15px;
  z-index: -1;
}

.qaid-ultimate:hover::before {
  opacity: 1;
}

.qaid-ultimate:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.qaid-ultimate .qaid-icon {
  filter: drop-shadow(0 0 8px currentColor);
  transition: filter 0.3s ease;
}

.qaid-ultimate:hover .qaid-icon {
  filter: drop-shadow(0 0 12px currentColor);
}

.qaid-ultimate.qaid-btn-up { color: #4ade80; }
.qaid-ultimate.qaid-btn-down { color: #f87171; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

This combines glassmorphism, animated gradient borders, icon glow, and smooth transitions for a premium interactive experience.

With these techniques in your toolkit, you can create feedback buttons that don’t just collect user sentiment—they enhance your entire user experience. Remember: the best design is invisible until it delights.

Back to all articles