AAA Button Library
Use this library to preview available AAA button styles and sizes. Each button includes the complete HTML and the class attribute by itself so it can be easily copied into website code.
Basic button structure:
Available sizes:
class="btn [size] [style] [optional modifier]"
Available sizes:
btn-lg,
btn-md,
and
btn-sm.
Gradient Buttons
Gradient button treatments with solid and outline variations.
Gradient
Large
Full HTML
<a href="#" class="btn btn-lg btn-aaa-gradient">Button Text</a>
Class Only
class="btn btn-lg btn-aaa-gradient"
Medium
Full HTML
<a href="#" class="btn btn-md btn-aaa-gradient">Button Text</a>
Class Only
class="btn btn-md btn-aaa-gradient"
Small
Full HTML
<a href="#" class="btn btn-sm btn-aaa-gradient">Button Text</a>
Class Only
class="btn btn-sm btn-aaa-gradient"
Gradient + Arrows
Large
Full HTML
<a href="#" class="btn btn-lg btn-aaa-gradient btn-arrows">Button Text</a>
Class Only
class="btn btn-lg btn-aaa-gradient btn-arrows"
Medium
Full HTML
<a href="#" class="btn btn-md btn-aaa-gradient btn-arrows">Button Text</a>
Class Only
class="btn btn-md btn-aaa-gradient btn-arrows"
Small
Full HTML
<a href="#" class="btn btn-sm btn-aaa-gradient btn-arrows">Button Text</a>
Class Only
class="btn btn-sm btn-aaa-gradient btn-arrows"
Gradient Outline
Large
Full HTML
<a href="#" class="btn btn-lg btn-aaa-gradient-outline">Button Text</a>
Class Only
class="btn btn-lg btn-aaa-gradient-outline"
Medium
Full HTML
<a href="#" class="btn btn-md btn-aaa-gradient-outline">Button Text</a>
Class Only
class="btn btn-md btn-aaa-gradient-outline"
Small
Full HTML
<a href="#" class="btn btn-sm btn-aaa-gradient-outline">Button Text</a>
Class Only
class="btn btn-sm btn-aaa-gradient-outline"
Gradient Outline + Arrows
Large
Full HTML
<a href="#" class="btn btn-lg btn-aaa-gradient-outline btn-arrows">Button Text</a>
Class Only
class="btn btn-lg btn-aaa-gradient-outline btn-arrows"
Medium
Full HTML
<a href="#" class="btn btn-md btn-aaa-gradient-outline btn-arrows">Button Text</a>
Class Only
class="btn btn-md btn-aaa-gradient-outline btn-arrows"
Small
Full HTML
<a href="#" class="btn btn-sm btn-aaa-gradient-outline btn-arrows">Button Text</a>
Class Only
class="btn btn-sm btn-aaa-gradient-outline btn-arrows"
AAA Red Buttons
Solid and outline button treatments using AAA red.
Red
Large
Full HTML
<a href="#" class="btn btn-lg btn-aaa-red">Button Text</a>
Class Only
class="btn btn-lg btn-aaa-red"
Medium
Full HTML
<a href="#" class="btn btn-md btn-aaa-red">Button Text</a>
Class Only
class="btn btn-md btn-aaa-red"
Small
Full HTML
<a href="#" class="btn btn-sm btn-aaa-red">Button Text</a>
Class Only
class="btn btn-sm btn-aaa-red"
Red + Arrows
Large
Full HTML
<a href="#" class="btn btn-lg btn-aaa-red btn-arrows">Button Text</a>
Class Only
class="btn btn-lg btn-aaa-red btn-arrows"
Medium
Full HTML
<a href="#" class="btn btn-md btn-aaa-red btn-arrows">Button Text</a>
Class Only
class="btn btn-md btn-aaa-red btn-arrows"
Small
Full HTML
<a href="#" class="btn btn-sm btn-aaa-red btn-arrows">Button Text</a>
Class Only
class="btn btn-sm btn-aaa-red btn-arrows"
Red Outline
Large
Full HTML
<a href="#" class="btn btn-lg btn-aaa-red-outline">Button Text</a>
Class Only
class="btn btn-lg btn-aaa-red-outline"
Medium
Full HTML
<a href="#" class="btn btn-md btn-aaa-red-outline">Button Text</a>
Class Only
class="btn btn-md btn-aaa-red-outline"
Small
Full HTML
<a href="#" class="btn btn-sm btn-aaa-red-outline">Button Text</a>
Class Only
class="btn btn-sm btn-aaa-red-outline"
Red Outline + Arrows
Large
Full HTML
<a href="#" class="btn btn-lg btn-aaa-red-outline btn-arrows">Button Text</a>
Class Only
class="btn btn-lg btn-aaa-red-outline btn-arrows"
Medium
Full HTML
<a href="#" class="btn btn-md btn-aaa-red-outline btn-arrows">Button Text</a>
Class Only
class="btn btn-md btn-aaa-red-outline btn-arrows"
Small
Full HTML
<a href="#" class="btn btn-sm btn-aaa-red-outline btn-arrows">Button Text</a>
Class Only
class="btn btn-sm btn-aaa-red-outline btn-arrows"
AAA Orange Buttons
Solid and outline button treatments using AAA orange.
Orange
Large
Full HTML
<a href="#" class="btn btn-lg btn-aaa-orange">Button Text</a>
Class Only
class="btn btn-lg btn-aaa-orange"
Medium
Full HTML
<a href="#" class="btn btn-md btn-aaa-orange">Button Text</a>
Class Only
class="btn btn-md btn-aaa-orange"
Small
Full HTML
<a href="#" class="btn btn-sm btn-aaa-orange">Button Text</a>
Class Only
class="btn btn-sm btn-aaa-orange"
Orange + Arrows
Large
Full HTML
<a href="#" class="btn btn-lg btn-aaa-orange btn-arrows">Button Text</a>Class Only
class="btn btn-lg btn-aaa-orange btn-arrows"
Medium
Full HTML
<a href="#" class="btn btn-md btn-aaa-orange btn-arrows">Button Text</a>Class Only
class="btn btn-md btn-aaa-orange btn-arrows"
Small
Full HTML
<a href="#" class="btn btn-sm btn-aaa-orange btn-arrows">Button Text</a>Class Only
class="btn btn-sm btn-aaa-orange btn-arrows"Orange Outline
Large
Full HTML
<a href="#" class="btn btn-lg btn-aaa-orange-outline">Button Text</a>Class Only
class="btn btn-lg btn-aaa-orange-outline"
Medium
Full HTML
<a href="#" class="btn btn-md btn-aaa-orange-outline">Button Text</a>Class Only
class="btn btn-md btn-aaa-orange-outline"
Small
Full HTML
<a href="#" class="btn btn-sm btn-aaa-orange-outline">Button Text</a>Class Only
class="btn btn-sm btn-aaa-orange-outline"Orange Outline + Arrows
Large
Full HTML
<a href="#" class="btn btn-lg btn-aaa-orange-outline btn-arrows">Button Text</a>Class Only
class="btn btn-lg btn-aaa-orange-outline btn-arrows"
Medium
Full HTML
<a href="#" class="btn btn-md btn-aaa-orange-outline btn-arrows">Button Text</a>Class Only
class="btn btn-md btn-aaa-orange-outline btn-arrows"
Small
Full HTML
<a href="#" class="btn btn-sm btn-aaa-orange-outline btn-arrows">Button Text</a>Class Only
class="btn btn-sm btn-aaa-orange-outline btn-arrows"AAA Blue Buttons
Solid and outline button treatments using AAA blue.
Blue
Large
Full HTML
<a href="#" class="btn btn-lg btn-aaa-blue">Button Text</a>Class Only
class="btn btn-lg btn-aaa-blue"
Medium
Full HTML
<a href="#" class="btn btn-md btn-aaa-blue">Button Text</a>Class Only
class="btn btn-md btn-aaa-blue"
Small
Full HTML
<a href="#" class="btn btn-sm btn-aaa-blue">Button Text</a>Class Only
class="btn btn-sm btn-aaa-blue"Blue + Arrows
Large
Full HTML
<a href="#" class="btn btn-lg btn-aaa-blue btn-arrows">Button Text</a>Class Only
class="btn btn-lg btn-aaa-blue btn-arrows"
Medium
Full HTML
<a href="#" class="btn btn-md btn-aaa-blue btn-arrows">Button Text</a>Class Only
class="btn btn-md btn-aaa-blue btn-arrows"
Small
Full HTML
<a href="#" class="btn btn-sm btn-aaa-blue btn-arrows">Button Text</a>Class Only
class="btn btn-sm btn-aaa-blue btn-arrows"Blue Outline
Large
Full HTML
<a href="#" class="btn btn-lg btn-aaa-blue-outline">Button Text</a>Class Only
class="btn btn-lg btn-aaa-blue-outline"
Medium
Full HTML
<a href="#" class="btn btn-md btn-aaa-blue-outline">Button Text</a>Class Only
class="btn btn-md btn-aaa-blue-outline"
Small
Full HTML
<a href="#" class="btn btn-sm btn-aaa-blue-outline">Button Text</a>Class Only
class="btn btn-sm btn-aaa-blue-outline"Blue Outline + Arrows
Large
Full HTML
<a href="#" class="btn btn-lg btn-aaa-blue-outline btn-arrows">Button Text</a>Class Only
class="btn btn-lg btn-aaa-blue-outline btn-arrows"
Medium
Full HTML
<a href="#" class="btn btn-md btn-aaa-blue-outline btn-arrows">Button Text</a>Class Only
class="btn btn-md btn-aaa-blue-outline btn-arrows"
Small
Full HTML
<a href="#" class="btn btn-sm btn-aaa-blue-outline btn-arrows">Button Text</a>Class Only
class="btn btn-sm btn-aaa-blue-outline btn-arrows"AAA Dark Blue Buttons
Solid and outline button treatments using AAA dark blue.
Dark Blue
Large
Full HTML
<a href="#" class="btn btn-lg btn-aaa-dark-blue">Button Text</a>Class Only
class="btn btn-lg btn-aaa-dark-blue"
Medium
Full HTML
<a href="#" class="btn btn-md btn-aaa-dark-blue">Button Text</a>Class Only
class="btn btn-md btn-aaa-dark-blue"
Small
Full HTML
<a href="#" class="btn btn-sm btn-aaa-dark-blue">Button Text</a>Class Only
class="btn btn-sm btn-aaa-dark-blue"Dark Blue + Arrows
Large
Full HTML
<a href="#" class="btn btn-lg btn-aaa-dark-blue btn-arrows">Button Text</a>Class Only
class="btn btn-lg btn-aaa-dark-blue btn-arrows"
Medium
Full HTML
<a href="#" class="btn btn-md btn-aaa-dark-blue btn-arrows">Button Text</a>Class Only
class="btn btn-md btn-aaa-dark-blue btn-arrows"
Small
Full HTML
<a href="#" class="btn btn-sm btn-aaa-dark-blue btn-arrows">Button Text</a>Class Only
class="btn btn-sm btn-aaa-dark-blue btn-arrows"Dark Blue Outline
Large
Full HTML
<a href="#" class="btn btn-lg btn-aaa-dark-blue-outline">Button Text</a>Class Only
class="btn btn-lg btn-aaa-dark-blue-outline"
Medium
Full HTML
<a href="#" class="btn btn-md btn-aaa-dark-blue-outline">Button Text</a>Class Only
class="btn btn-md btn-aaa-dark-blue-outline"
Small
Full HTML
<a href="#" class="btn btn-sm btn-aaa-dark-blue-outline">Button Text</a>Class Only
class="btn btn-sm btn-aaa-dark-blue-outline"Dark Blue Outline + Arrows
Large
Full HTML
<a href="#" class="btn btn-lg btn-aaa-dark-blue-outline btn-arrows">Button Text</a>Class Only
class="btn btn-lg btn-aaa-dark-blue-outline btn-arrows"
Medium
Full HTML
<a href="#" class="btn btn-md btn-aaa-dark-blue-outline btn-arrows">Button Text</a>Class Only
class="btn btn-md btn-aaa-dark-blue-outline btn-arrows"
Small
Full HTML
<a href="#" class="btn btn-sm btn-aaa-dark-blue-outline btn-arrows">Button Text</a>Class Only
class="btn btn-sm btn-aaa-dark-blue-outline btn-arrows"AAA Light Blue Buttons
Solid and outline button treatments using AAA light blue.
Light Blue
Large
Full HTML
<a href="#" class="btn btn-lg btn-aaa-light-blue">Button Text</a>Class Only
class="btn btn-lg btn-aaa-light-blue"
Medium
Full HTML
<a href="#" class="btn btn-md btn-aaa-light-blue">Button Text</a>Class Only
class="btn btn-md btn-aaa-light-blue"
Small
Full HTML
<a href="#" class="btn btn-sm btn-aaa-light-blue">Button Text</a>Class Only
class="btn btn-sm btn-aaa-light-blue"Light Blue + Arrows
Large
Full HTML
<a href="#" class="btn btn-lg btn-aaa-light-blue btn-arrows">Button Text</a>Class Only
class="btn btn-lg btn-aaa-light-blue btn-arrows"
Medium
Full HTML
<a href="#" class="btn btn-md btn-aaa-light-blue btn-arrows">Button Text</a>Class Only
class="btn btn-md btn-aaa-light-blue btn-arrows"
Small
Full HTML
<a href="#" class="btn btn-sm btn-aaa-light-blue btn-arrows">Button Text</a>Class Only
class="btn btn-sm btn-aaa-light-blue btn-arrows"Light Blue Outline
Large
Full HTML
<a href="#" class="btn btn-lg btn-aaa-light-blue-outline">Button Text</a>Class Only
class="btn btn-lg btn-aaa-light-blue-outline"
Medium
Full HTML
<a href="#" class="btn btn-md btn-aaa-light-blue-outline">Button Text</a>Class Only
class="btn btn-md btn-aaa-light-blue-outline"
Small
Full HTML
<a href="#" class="btn btn-sm btn-aaa-light-blue-outline">Button Text</a>Class Only
class="btn btn-sm btn-aaa-light-blue-outline"Light Blue Outline + Arrows
Large
Full HTML
<a href="#" class="btn btn-lg btn-aaa-light-blue-outline btn-arrows">Button Text</a>Class Only
class="btn btn-lg btn-aaa-light-blue-outline btn-arrows"
Medium
Full HTML
<a href="#" class="btn btn-md btn-aaa-light-blue-outline btn-arrows">Button Text</a>Class Only
class="btn btn-md btn-aaa-light-blue-outline btn-arrows"
Small
Full HTML
<a href="#" class="btn btn-sm btn-aaa-light-blue-outline btn-arrows">Button Text</a>Class Only
class="btn btn-sm btn-aaa-light-blue-outline btn-arrows"