---
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