Primary Button with Corner Brackets that Slide In

Primary Button with Corner Brackets that Slide In

Micro-interactions can turn an ordinary call to action into something memorable. In this SVG animation example, four small corner marks sit just outside the button label and move inward on hover or focus, visually framing the text and reinforcing the idea of a primary action. The result is crisp, modern, and easy to adapt to landing pages, product interfaces, and marketing components.

Because the decoration is built with SVG, the corners stay sharp at any size, animate smoothly, and remain lightweight compared to more complex image-based effects. It is a strong pattern for buttons and calls to action when you want a polished motion cue that supports usability rather than distracting from it.

Why this interaction works

• Clear affordance: the button visually responds before the user clicks.
• Focused motion: the corner brackets move inward, naturally drawing attention to the label.
• Brand-friendly: the animation can be tuned to match a minimal, bold, or premium style.
• Accessible by design: it can animate on both hover and keyboard focus.

Design concept

The structure is simple: a rectangular button contains the label, and four tiny SVG corner marks are positioned near the edges. On interaction, each mark slides a short distance toward the center, creating the feeling of an active frame. You can make the movement linear for a technical feel or use eased motion for a softer, more premium touch.

This effect is especially effective for primary actions such as Get Started, Request a Demo, Download, or Sign Up. It communicates importance without relying on color alone.

HTML and SVG example

<button class="cta-btn" aria-label="Get started">
  <svg class="cta-corners" viewBox="0 0 220 64" aria-hidden="true">
    <path class="corner tl" d="M18 10 H6 V22" />
    <path class="corner tr" d="M202 10 H214 V22" />
    <path class="corner bl" d="M18 54 H6 V42" />
    <path class="corner br" d="M202 54 H214 V42" />
  </svg>
  <span>Get Started</span>
</button>

The button text stays in normal HTML for easy accessibility and localization, while the decorative corners live inside the SVG. Each corner is just an L-shaped line segment, which makes the animation easy to control with CSS transforms.

CSS animation example

.cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  height: 64px;
  padding: 0 24px;
  border: 0;
  background: #0f172a;
  color: #fff;
  font: 600 16px/1.1 system-ui, sans-serif;
  cursor: pointer;
  overflow: hidden;
}

.cta-corners {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  pointer-events: none;
}

.corner {
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), opacity 240ms ease;
  opacity: 0.8;
}

.tl { transform: translate(-6px, -6px); }
.tr { transform: translate(6px, -6px); }
.bl { transform: translate(-6px, 6px); }
.br { transform: translate(6px, 6px); }

.cta-btn:hover .tl,
.cta-btn:focus-visible .tl,
.cta-btn:hover .tr,
.cta-btn:focus-visible .tr,
.cta-btn:hover .bl,
.cta-btn:focus-visible .bl,
.cta-btn:hover .br,
.cta-btn:focus-visible .br {
  transform: translate(0, 0);
  opacity: 1;
}

.cta-btn:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 4px;
}

This code uses CSS transitions rather than a continuous loop, which is ideal for buttons and calls to action. The motion only occurs when the user interacts, keeping the UI calm and purposeful.

How to customize the effect

You can adjust the behavior in several ways depending on your design system:

• Change bracket length: make the corner marks longer for a more architectural look.
• Adjust stroke width: thicker lines feel bolder; thinner lines feel more refined.
• Modify timing: faster motion feels energetic, while slower motion feels premium.
• Swap the color: use the button text color for a clean single-tone effect, or accent the corners with a brand color.
• Combine with hover fill: add a subtle background shift or glow to strengthen the feedback.

Best practices for UI use

When using an animated primary button, make sure the effect supports the message of the interface. The corner brackets should confirm the button state, not compete with the label. Keep the movement short and avoid oversized decorative elements that reduce readability.

For accessibility, always ensure the button has enough contrast and a visible focus style. If your site supports reduced motion preferences, consider simplifying the animation for users who prefer less movement.

@media (prefers-reduced-motion: reduce) {
  .corner {
    transition: none;
    transform: none;
  }
}

Where this pattern shines

This SVG animation example works particularly well in product hero sections, pricing pages, onboarding flows, and modal confirmations. It is also a strong choice for SaaS websites where the primary CTA must stand out without looking overly promotional.

If your interface uses a dark theme, the corner brackets can create a clean luminous frame. On light backgrounds, the same idea can look crisp and editorial. The visual logic stays the same: a subtle animated border cue that guides attention toward the action.

Takeaway

The slide-in corner bracket button is a small interaction with a big payoff. It adds motion, clarity, and a premium feel to a primary CTA while staying lightweight and easy to implement. For designers and developers looking for refined buttons and calls to action, this SVG animation example is a practical pattern that balances style, usability, and performance.