AI Mode Button · Interactions

How We Built This AI Mode Button

This component is made using layered CSS backgrounds. The button itself stays simple, and we animate only the border gradient on hover.

1) We started with a normal pill button

First we made a regular rounded button with icon + label. This gives us a clean base before adding effects.

<button class="ai-btn">
  <img class="ai-btn__icon" src="search_spark.png" alt="AI search spark" />
  <span class="ai-btn__label">AI Mode</span>
</button>

2) We used two background layers

One background paints the inner fill, and the second background paints the border area. This lets us animate the border without affecting button content.

.ai-btn {
  border: 2px solid transparent;
  background-image:
    linear-gradient(#F6F6F6, #F6F6F6),
    linear-gradient(transparent, transparent);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}

3) We animated the border with a conic gradient

On hover, we replace the border layer with a conic gradient and rotate it. The center fill remains stable, while the border appears to orbit around the button.

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
}

@keyframes spin-border {
  to { --angle: 360deg; }
}

.ai-btn:hover {
  background-image:
    linear-gradient(#fff, #fff),
    conic-gradient(from var(--angle), ...);
  animation: spin-border 2.4s linear infinite;
}

4) We added subtle depth on hover

A light shadow is applied only on hover. This makes the animation feel more alive but still clean.

.ai-btn:hover {
  box-shadow:
    0 2px 10px rgba(0,0,0,.10),
    0 4px 20px rgba(66,133,244,.18);
}

1@property --angle { 2 syntax: '<angle>'; 3 initial-value: 0deg; 4 inherits: false; 5} 6 7@keyframes spin-border { 8 to { --angle: 360deg; } 9} 10 11.ai-btn { 12 display: inline-flex; 13 align-items: center; 14 gap: 8px; 15 height: 41px; 16 padding: 0 18px; 17 border-radius: 60px; 18 border: 2px solid transparent; 19 cursor: pointer; 20 background-image: 21 linear-gradient(#F6F6F6, #F6F6F6), 22 linear-gradient(transparent, transparent); 23 background-origin: padding-box, border-box; 24 background-clip: padding-box, border-box; 25 animation: none; 26} 27 28.ai-btn:hover { 29 background-image: 30 linear-gradient(#fff, #fff), 31 conic-gradient( 32 from var(--angle), 33 transparent 0deg, 34 transparent 40deg, 35 #4285F4 75deg, /* blue */ 36 #4285F4 195deg, /* blue */ 37 #EA4335 225deg, /* red */ 38 #FBBC04 248deg, /* yellow */ 39 #34A853 268deg, /* green */ 40 transparent 305deg, 41 transparent 360deg 42 ); 43 background-origin: padding-box, border-box; 44 background-clip: padding-box, border-box; 45 animation: spin-border 2.4s linear infinite; 46 box-shadow: 47 0 2px 10px rgba(0,0,0,.10), 48 0 4px 20px rgba(66,133,244,.18); 49} 50 51.ai-btn__icon { 52 width: 20px; 53 height: 20px; 54 display: block; 55} 56 57.ai-btn__label { 58 font-size: 12px; 59 font-weight: 400; 60 color: #000; 61}