SquadKode Bits
39.9KCreate
HTML/CSS

Soft Press Button

PreviewCode
Live preview#softpr

HTML/CSS

Start ->

Install

Use this as a template path now; later it can map to a real registry package.

shadcn
pnpm dlx shadcn@latest add @squadkode/ui-lab/soft-press-button

Usage (with your settings)

A compact React example generated from this template data.

import "./soft-press-button.css"; export function SoftPressButton() {  return (    <button className="sk-glow-button">      Start project <span aria-hidden="true">-&gt;</span>    </button>  );}

Code

Switch between HTML, CSS, TSX, and Astro versions.

HTMLStatic markup for previews and no-build pages.CSSThemeable styling with compact component scope.TSXReact-ready component with imported CSS.AstroDrop-in Astro component with local styles.
<button class="sk-glow-button">  Start project  <span aria-hidden="true">-></span></button>
.sk-glow-button {  display: inline-flex;  align-items: center;  gap: .65rem;  min-height: 44px;  border: 1px solid rgba(213,171,255,.32);  border-radius: 999px;  padding: 0 1.1rem;  color: #fff;  background: linear-gradient(135deg, #7c3aed, #ff66c4);  font: 700 .92rem/1 Inter, system-ui, sans-serif;} .sk-glow-button span {  transition: transform .2s ease;} .sk-glow-button:hover span {  transform: translateX(3px);}
import "./soft-press-button.css"; export function SoftPressButton() {  return (    <button className="sk-glow-button">      Start project <span aria-hidden="true">-&gt;</span>    </button>  );}
---// Soft Press Button--- <button class="sk-glow-button">  Start project  <span aria-hidden="true">-></span></button> <style>.sk-glow-button {  display: inline-flex;  align-items: center;  gap: .65rem;  min-height: 44px;  border: 1px solid rgba(213,171,255,.32);  border-radius: 999px;  padding: 0 1.1rem;  color: #fff;  background: linear-gradient(135deg, #7c3aed, #ff66c4);  font: 700 .92rem/1 Inter, system-ui, sans-serif;} .sk-glow-button span {  transition: transform .2s ease;} .sk-glow-button:hover span {  transform: translateX(3px);}</style>

Copy Prompt

Use this prompt to recreate or extend the element with the same intent.

Create a polished Soft Press Button component for a modern Astro or React website. Requirements: - Match the SquadKode visual system with clean spacing, 8px card radius, accessible labels, and responsive behavior. - Provide HTML, CSS, TSX, and Astro versions. - Keep the component lightweight, semantic, and easy to copy into a production page. - Include notes for accessibility, reduced motion, and where this pattern works best. Context: A minimal button with a pressed state that keeps visual noise low.

Variations

2 related patterns from this category.

Implementation Notes

Small details that make this template useful in production pages.

+

Subtle hover feedback

+

Rounded 8px shape

+

Ideal for dashboard actions