@n8d/htwoo-patterns
Version:
hTWOo Patterns to setup custom style guide
45 lines (30 loc) • 1.48 kB
Markdown
---
title: Quick Link Button - Outline Center One Line
order: 36
---
# Quick Link Button - Outline Center One Line
A subtle button-style quick link with outline border, centered content, and single-line title display. This variant provides clear button appearance while maintaining visual subtlety.
## Overview
The outline center one-line button offers button-like interaction with minimal visual weight. It uses border styling instead of filled backgrounds, making it ideal for secondary actions and complementary navigation.
## Features
- **Outline Style**: Border-only styling with transparent background
- **Centered Layout**: Vertical icon and text alignment
- **Single Line**: Compact title display with ellipsis
- **Subtle Appearance**: Lower visual weight than filled variants
- **Hover Effects**: Background color on interaction
- **Icon Integration**: Centered icon positioning
## CSS Classes
- `.hoo-qlbtn`: Main button container
- `.oneline`: Single-line text modifier
- `.center`: Centered layout modifier
## Styling
- **Border**: Theme color outline (`#0078d4`)
- **Background**: Transparent (default), light gray on hover
- **Text**: Theme color text
- **Layout**: Centered vertical arrangement
## Use Cases
- **Secondary Actions**: Supporting navigation options
- **Complementary Buttons**: Alongside primary filled buttons
- **Clean Interfaces**: Minimal visual weight requirements
- **Tool Palettes**: Action selection interfaces
## SCSS Import