Form with Custom Button Styles Template

Enhance your forms with this versatile library of button styles.

This template provides a collection of common button designs that you can drop into any form to create a clear visual hierarchy for user actions. Styles include "primary", "secondary", "disabled", as well as a couple of icons to help out.

Get Source Code → Preview →

About these Button Styles

Buttons are the primary call-to-action in most forms, and their design can significantly impact user behavior. Providing a clear visual distinction between different types of actions is crucial for good UI design. This template offers a reusable set of CSS classes for common button patterns.

Features

Visual Hierarchy: Clear styles for Primary (the main action, e.g., "Submit"), Secondary (an alternative action, e.g., "Cancel"), and Outline buttons.
State Variations: Includes styles for "hover", "focus", and "disabled" states, which are essential for a good user experience.
Flexible & Reusable: The class-based system makes it easy to apply any style to a button or a tag.
Icon Buttons: Includes an example of pairing an icon with text for buttons that require extra visual context.

Ideal Use Cases

Establishing a consistent button design system for a website or application.
Providing clear user choices in forms (e.g., "Save" vs. "Save and Continue").
Creating disabled buttons that become active once a form is valid.

Dependencies

None. This template uses only pure HTML and CSS.

Code

Here's the full code for the custom button styles:

<div class="button-form-container">
    
    <form action="#" method="post">

<div class="form-group">
            <h3>Standard Actions</h3>
            <div class="buttons">
                
                <button type="submit" class="btn btn-primary">Save Changes</button> 
                
                <button type="reset" class="btn btn-secondary">Cancel</button>
            </div>
        </div>

<div class="form-group">
            <h3>Alternative & Destructive Actions</h3>
            <div class="buttons">
                 <button type="button" class="btn btn-outline">Export Data</button>
                 <button type="button" class="btn btn-danger">Delete Account</button>
            </div>
        </div>

<div class="form-group">
            <h3>Buttons with Icons</h3>
            <div class="buttons">
                <button type="button" class="btn btn-primary">
                    <svg class="icon" viewBox="0 0 24 24" fill="currentColor"><path d="M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z"></path></svg>
                    Download
                </button>
                 <button type="button" class="btn btn-danger">
                    <svg class="icon" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path></svg>
                    Delete
                </button>
            </div>
        </div>
        
         <div class="form-group">
            <h3>Disabled State</h3>
            <div class="buttons">
                 <button type="submit" class="btn btn-primary" disabled>Submit (Disabled)</button>
            </div>
        </div>
        
         <div class="form-group">
            <h3>Full-Width Block Button</h3>
            <div class="buttons">
                 <button type="submit" class="btn btn-primary btn-block">Register Full Account</button>
            </div>
        </div>
        
    </form>
</div>

View Output