Outline (Ghost) Button Template

This template offers a modern, transparent button with a colored border, perfect for secondary actions.

Often called a "ghost button", its subtle design is ideal for choices like "Learn More" or "View Details" that should not distract from the page's main call-to-action.

Get Source Code Preview

About the Outline (Ghost) Button

An outline button provides a clean, minimalist aesthetic. By removing the background fill, it maintains a lower visual priority on the page, gracefully guiding users to less critical actions. The design relies on a clear border and text to define its shape and purpose. When the user interacts with it, the button fills with color, confirming its interactivity.

Features

Minimalist Design: A transparent background and single-color border provide a clean look that works well on photographic or colorful backgrounds.
Hover Effect: The button animates from outlined to solid on hover, creating a pleasing and intuitive user interaction.
Accessible by Design: A clear :focus-visible style ensures keyboard users can easily identify the active element.
CSS-Only: The entire look and feel is achieved with HTML and CSS, making it lightweight and easy to implement.

Code Breakdown

The core styling for this button in its default state uses background-color: transparent and a colored border. A transition is applied to multiple properties, including background-color and color. On hover, these properties are flipped: the background fills with color, and the text color changes to ensure it remains readable. Padding is calculated using the calc() function to subtract the border width, ensuring consistent inner dimensions.

Code

Here is the complete code for the outline button template.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Outline (Ghost) Button</title>
    <style>
        /*
         Component: Outline (Ghost) Button
         Description: A button with a transparent background and a border that fills on hover.
        */

:root {
            --outline-primary-color: #007bff;
            --outline-text-color: var(--outline-primary-color);
            --outline-hover-text-color: #ffffff;
            --outline-focus-outline: var(--outline-primary-color);
        }

.outline-container-1 {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2rem;
            background-color: #f8f9fa; /* Example background */
        }

.outline-btn-1 {
            display: inline-block;
            font-size: 1rem;
            font-weight: 600;
            line-height: 1.5;
            text-align: center;
            
            background-color: transparent;
            color: var(--outline-text-color);
            
            border: 2px solid var(--outline-primary-color);
            border-radius: 6px;
            /* Adjust padding to account for the border width */
            padding: calc(0.8rem - 2px) calc(1.6rem - 2px);
            
            cursor: pointer;
            text-decoration: none;
            transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
        }

.outline-btn-1:hover {
            background-color: var(--outline-primary-color);
            color: var(--outline-hover-text-color);
        }
        
        .outline-btn-1:active {
            transform: translateY(1px);
        }
        
        .outline-btn-1:focus-visible {
            outline: 3px solid var(--outline-focus-outline);
            outline-offset: 2px;
        }
    </style>
</head>
<body>

<div class="outline-container-1">
        <button type="button" class="outline-btn-1">View Details</button>
    </div>

</body>
</html>

View Output