← Back to Gallery
Sketchy Scribble Button
Live Preview
A charming, hand-drawn 'Doodle' themed button designed to break the monotony of rigid corporate UI. It features an organic, imperfect border-radius that mimics a freehand sketch, paired with a bold offset shadow for a comic-book depth effect. The hover state adds a playful rotation and a 'scribble' underline animation using an inline SVG path, creating a tactile and friendly user experience without the need for any JavaScript logic.
Features
- Organic irregular border-radius for hand-drawn aesthetic
- CSS-only 'scribble' underline reveal on hover
- Dynamic offset box-shadow for a 3D tactile feel
- Custom 'Gochi Hand' Google Font integration
- Responsive scaling for mobile touch targets
- Zero-dependency interaction using CSS pseudo-classes
Uses
- Creative portfolios
- Children's educational platforms
- Personal blogs and journals
- Indie game landing pages
- Art and design studio websites
Benefits
- High visual impact with minimal code footprint
- No-JS requirement ensures perfect performance and accessibility
- Unique personality that builds brand approachability
- Highly customizable colors and stroke widths
- Lightweight SVG accents for extra polish
Techniques Used
CSS complex border-radius (8-value syntax), SVG path animations, CSS transforms, absolute positioning, FontAwesome icon integration, box-shadow offsets.
Frequently Asked Questions
How is the organic, non-uniform border-radius achieved to simulate a hand-drawn stroke without using static images?
The component utilizes the eight-value CSS border-radius syntax (e.g., 255px 15px 225px 15px / 15px 225px 15px 255px) which allows for independent horizontal and vertical radii on each corner. This creates the 'blobby' and imperfect aesthetic that mimics a freehand ink sketch.
What CSS technique is used to animate the SVG scribble underline reveal on hover without JavaScript dependency?
The 'scribble' is an inline SVG path stored within a ::after pseudo-element. On hover, the 'stroke-dasharray' and 'stroke-dashoffset' properties are transitioned from the full path length to zero, creating a 'drawing' effect that tracks with the user's cursor interaction.
How does the dynamic offset box-shadow interact with the transform property to create the tactile 3D 'click' feel?
The button uses a hard-coded, non-blurred box-shadow (e.g., 5px 5px 0px black). On the :active pseudo-class, the button uses 'transform: translate(2px, 2px)' while simultaneously reducing the box-shadow spread, creating the visual illusion of the button being physically pressed into the page.
How is the Gochi Hand font integrated to prevent Layout Shift (CLS) while maintaining the doodle aesthetic?
The font is loaded via the Google Fonts API with the '&display=swap' parameter. A local fallback of 'Comic Sans MS' or 'cursive' is defined in the font-family stack to ensure that the button dimensions, calculated using 'em' units for padding, remain relatively stable while the custom typeface loads.
If I need to scale this component for a large-format kiosk, how do the 'scribble' SVG stroke-widths maintain their visual weight?
The SVG path inside the button uses the 'vector-effect: non-scaling-stroke' property. This ensures that even if the button is scaled up via CSS transforms or container resizing, the scribble underline maintains a consistent pixel-width stroke, preventing it from looking blurred or overly thick.