Default Buttons
Start with .btn as the foundation. Enhance with .pt-btn-(color) for color, .pt-btn-(size)-(width) for size adjustments, and .pt-round-(roundness) to round the corners.
Primary
Accent
Secondary
Black
Light Gray
Gray
Dark Gray
Light Red
Red
Dark Red
Light Orange
Orange
Dark Orange
Light Yellow
Yellow
Dark Yellow
Light Green
Green
Dark Green
Light Blue
Blue
Dark Blue
Light Purple
Purple
Dark Purple
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<a class="btn pt-btn-primary pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Primary</a>
<a class="btn pt-btn-secondary pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Accent</a>
<a class="btn pt-btn-accent pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Secondary</a>
<a class="btn pt-btn-black pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Black</a>
<a class="btn pt-btn-gray-light pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Light Gray</a>
<a class="btn pt-btn-gray pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Gray</a>
<a class="btn pt-btn-gray-dark pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Dark Gray</a>
<a class="btn pt-btn-red-light pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Light Red</a>
<a class="btn pt-btn-red pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Red</a>
<a class="btn pt-btn-red-dark pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Dark Red</a>
<a class="btn pt-btn-orange-light pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Light Orange</a>
<a class="btn pt-btn-orange pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Orange</a>
<a class="btn pt-btn-orange-dark pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Dark Orange</a>
<a class="btn pt-btn-yellow-light pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Light Yellow</a>
<a class="btn pt-btn-yellow pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Yellow</a>
<a class="btn pt-btn-yellow-dark pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Dark Yellow</a>
<a class="btn pt-btn-green-light pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Light Green</a>
<a class="btn pt-btn-green pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Green</a>
<a class="btn pt-btn-green-dark pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Dark Green</a>
<a class="btn pt-btn-blue-light pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Light Blue</a>
<a class="btn pt-btn-blue pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Blue</a>
<a class="btn pt-btn-blue-dark pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Dark Blue</a>
<a class="btn pt-btn-purple-light pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Light Purple</a>
<a class="btn pt-btn-purple pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Purple</a>
<a class="btn pt-btn-purple-dark pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Dark Purple</a>
Outline Buttons
Apply .pt-btn-outline-(color) to create outlined buttons where the border and text share the same color.
Primary
Accent
Secondary
Black
Light Gray
Gray
Dark Gray
Light Red
Red
Dark Red
Light Orange
Orange
Dark Orange
Light Yellow
Yellow
Dark Yellow
Light Green
Green
Dark Green
Light Blue
Blue
Dark Blue
Light Purple
Purple
Dark Purple
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<a class="btn pt-btn-outline-primary pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Primary</a>
<a class="btn pt-btn-outline-secondary pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Accent</a>
<a class="btn pt-btn-outline-accent pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Secondary</a>
<a class="btn pt-btn-outline-black pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Black</a>
<a class="btn pt-btn-outline-gray-light pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Light Gray</a>
<a class="btn pt-btn-outline-gray pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Gray</a>
<a class="btn pt-btn-outline-gray-dark pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Dark Gray</a>
<a class="btn pt-btn-outline-red-light pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Light Red</a>
<a class="btn pt-btn-outline-red pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Red</a>
<a class="btn pt-btn-outline-red-dark pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Dark Red</a>
<a class="btn pt-btn-outline-orange-light pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Light Orange</a>
<a class="btn pt-btn-outline-orange pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Orange</a>
<a class="btn pt-btn-outline-orange-dark pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Dark Orange</a>
<a class="btn pt-btn-outline-yellow-light pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Light Yellow</a>
<a class="btn pt-btn-outline-yellow pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Yellow</a>
<a class="btn pt-btn-outline-yellow-dark pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Dark Yellow</a>
<a class="btn pt-btn-outline-green-light pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Light Green</a>
<a class="btn pt-btn-outline-green pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Green</a>
<a class="btn pt-btn-outline-green-dark pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Dark Green</a>
<a class="btn pt-btn-outline-blue-light pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Light Blue</a>
<a class="btn pt-btn-outline-blue pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Blue</a>
<a class="btn pt-btn-outline-blue-dark pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Dark Blue</a>
<a class="btn pt-btn-outline-purple-light pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Light Purple</a>
<a class="btn pt-btn-outline-purple pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Purple</a>
<a class="btn pt-btn-outline-purple-dark pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Dark Purple</a>
Shadow Buttons
Add .pt-btn-shadow-(depth)-(darkness) to give buttons depth with customizable shadow strength and darkness.
Primary
Accent
Secondary
Black
Light Gray
Gray
Dark Gray
Light Red
Red
Dark Red
Light Orange
Orange
Dark Orange
Light Yellow
Yellow
Dark Yellow
Light Green
Green
Dark Green
Light Blue
Blue
Dark Blue
Light Purple
Purple
Dark Purple
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<a class="btn pt-btn-primary pt-btn-sm-wide pt-btn-shadow-4-20 pt-round-5 pt-ma-5" href="#">Primary</a>
<a class="btn pt-btn-secondary pt-btn-sm-wide pt-btn-shadow-4-20 pt-round-5 pt-ma-5" href="#">Accent</a>
<a class="btn pt-btn-accent pt-btn-sm-wide pt-btn-shadow-4-20 pt-round-5 pt-ma-5" href="#">Secondary</a>
<a class="btn pt-btn-black pt-btn-sm-wide pt-btn-shadow-4-20 pt-round-5 pt-ma-5" href="#">Black</a>
<a class="btn pt-btn-gray-light pt-btn-sm-wide pt-btn-shadow-4-20 pt-round-5 pt-ma-5" href="#">Light Gray</a>
<a class="btn pt-btn-gray pt-btn-sm-wide pt-btn-shadow-4-20 pt-round-5 pt-ma-5" href="#">Gray</a>
<a class="btn pt-btn-gray-dark pt-btn-sm-wide pt-btn-shadow-4-20 pt-round-5 pt-ma-5" href="#">Dark Gray</a>
<a class="btn pt-btn-red-light pt-btn-sm-wide pt-btn-shadow-4-20 pt-round-5 pt-ma-5" href="#">Light Red</a>
<a class="btn pt-btn-red pt-btn-sm-wide pt-btn-shadow-4-20 pt-round-5 pt-ma-5" href="#">Red</a>
<a class="btn pt-btn-red-dark pt-btn-sm-wide pt-btn-shadow-4-20 pt-round-5 pt-ma-5" href="#">Dark Red</a>
<a class="btn pt-btn-orange-light pt-btn-sm-wide pt-btn-shadow-4-20 pt-round-5 pt-ma-5" href="#">Light Orange</a>
<a class="btn pt-btn-orange pt-btn-sm-wide pt-btn-shadow-4-20 pt-round-5 pt-ma-5" href="#">Orange</a>
<a class="btn pt-btn-orange-dark pt-btn-sm-wide pt-btn-shadow-4-20 pt-round-5 pt-ma-5" href="#">Dark Orange</a>
<a class="btn pt-btn-yellow-light pt-btn-sm-wide pt-btn-shadow-4-20 pt-round-5 pt-ma-5" href="#">Light Yellow</a>
<a class="btn pt-btn-yellow pt-btn-sm-wide pt-btn-shadow-4-20 pt-round-5 pt-ma-5" href="#">Yellow</a>
<a class="btn pt-btn-yellow-dark pt-btn-sm-wide pt-btn-shadow-4-20 pt-round-5 pt-ma-5" href="#">Dark Yellow</a>
<a class="btn pt-btn-green-light pt-btn-sm-wide pt-btn-shadow-4-20 pt-round-5 pt-ma-5" href="#">Light Green</a>
<a class="btn pt-btn-green pt-btn-sm-wide pt-btn-shadow-4-20 pt-round-5 pt-ma-5" href="#">Green</a>
<a class="btn pt-btn-green-dark pt-btn-sm-wide pt-btn-shadow-4-20 pt-round-5 pt-ma-5" href="#">Dark Green</a>
<a class="btn pt-btn-blue-light pt-btn-sm-wide pt-btn-shadow-4-20 pt-round-5 pt-ma-5" href="#">Light Blue</a>
<a class="btn pt-btn-blue pt-btn-sm-wide pt-btn-shadow-4-20 pt-round-5 pt-ma-5" href="#">Blue</a>
<a class="btn pt-btn-blue-dark pt-btn-sm-wide pt-btn-shadow-4-20 pt-round-5 pt-ma-5" href="#">Dark Blue</a>
<a class="btn pt-btn-purple-light pt-btn-sm-wide pt-btn-shadow-4-20 pt-round-5 pt-ma-5" href="#">Light Purple</a>
<a class="btn pt-btn-purple pt-btn-sm-wide pt-btn-shadow-4-20 pt-round-5 pt-ma-5" href="#">Purple</a>
<a class="btn pt-btn-purple-dark pt-btn-sm-wide pt-btn-shadow-4-20 pt-round-5 pt-ma-5" href="#">Dark Purple</a>
Inset Line Buttons
Apply .pt-btn-brd-inset-(depth) to insert an inner border, breaking up the solid block of the button for subtle detail.
Primary
Accent
Secondary
Black
Light Gray
Gray
Dark Gray
Light Red
Red
Dark Red
Light Orange
Orange
Dark Orange
Light Yellow
Yellow
Dark Yellow
Light Green
Green
Dark Green
Light Blue
Blue
Dark Blue
Light Purple
Purple
Dark Purple
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<a class="btn pt-btn-primary pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Primary</a>
<a class="btn pt-btn-secondary pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Accent</a>
<a class="btn pt-btn-accent pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Secondary</a>
<a class="btn pt-btn-black pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Black</a>
<a class="btn pt-btn-gray-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Light Gray</a>
<a class="btn pt-btn-gray pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Gray</a>
<a class="btn pt-btn-gray-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Dark Gray</a>
<a class="btn pt-btn-red-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Light Red</a>
<a class="btn pt-btn-red pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Red</a>
<a class="btn pt-btn-red-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Dark Red</a>
<a class="btn pt-btn-orange-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Light Orange</a>
<a class="btn pt-btn-orange pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Orange</a>
<a class="btn pt-btn-orange-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Dark Orange</a>
<a class="btn pt-btn-yellow-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Light Yellow</a>
<a class="btn pt-btn-yellow pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Yellow</a>
<a class="btn pt-btn-yellow-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Dark Yellow</a>
<a class="btn pt-btn-green-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Light Green</a>
<a class="btn pt-btn-green pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Green</a>
<a class="btn pt-btn-green-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Dark Green</a>
<a class="btn pt-btn-blue-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Light Blue</a>
<a class="btn pt-btn-blue pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Blue</a>
<a class="btn pt-btn-blue-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Dark Blue</a>
<a class="btn pt-btn-purple-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Light Purple</a>
<a class="btn pt-btn-purple pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Purple</a>
<a class="btn pt-btn-purple-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Dark Purple</a>
Inset Outline Buttons
Combine .pt-btn-outline-(color) and .pt-btn-brd-inset-(depth) to create outlined buttons with added depth through a secondary inset border.
Primary
Accent
Secondary
Black
Light Gray
Gray
Dark Gray
Light Red
Red
Dark Red
Light Orange
Orange
Dark Orange
Light Yellow
Yellow
Dark Yellow
Light Green
Green
Dark Green
Light Blue
Blue
Dark Blue
Light Purple
Purple
Dark Purple
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<a class="btn pt-btn-outline-primary pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Primary</a>
<a class="btn pt-btn-outline-secondary pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Accent</a>
<a class="btn pt-btn-outline-accent pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Secondary</a>
<a class="btn pt-btn-outline-black pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Black</a>
<a class="btn pt-btn-outline-gray-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Light Gray</a>
<a class="btn pt-btn-outline-gray pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Gray</a>
<a class="btn pt-btn-outline-gray-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Dark Gray</a>
<a class="btn pt-btn-outline-red-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Light Red</a>
<a class="btn pt-btn-outline-red pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Red</a>
<a class="btn pt-btn-outline-red-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Dark Red</a>
<a class="btn pt-btn-outline-orange-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Light Orange</a>
<a class="btn pt-btn-outline-orange pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Orange</a>
<a class="btn pt-btn-outline-orange-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Dark Orange</a>
<a class="btn pt-btn-outline-yellow-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Light Yellow</a>
<a class="btn pt-btn-outline-yellow pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Yellow</a>
<a class="btn pt-btn-outline-yellow-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Dark Yellow</a>
<a class="btn pt-btn-outline-green-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Light Green</a>
<a class="btn pt-btn-outline-green pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Green</a>
<a class="btn pt-btn-outline-green-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Dark Green</a>
<a class="btn pt-btn-outline-blue-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Light Blue</a>
<a class="btn pt-btn-outline-blue pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Blue</a>
<a class="btn pt-btn-outline-blue-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Dark Blue</a>
<a class="btn pt-btn-outline-purple-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Light Purple</a>
<a class="btn pt-btn-outline-purple pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Purple</a>
<a class="btn pt-btn-outline-purple-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-round-5 pt-ma-5" href="#">Dark Purple</a>
Ring Buttons
Apply .pt-ring-btn-(color) to surround buttons with a colored ring, adding emphasis while keeping the background solid.
Primary
Accent
Secondary
Black
Light Gray
Gray
Dark Gray
Light Red
Red
Dark Red
Light Orange
Orange
Dark Orange
Light Yellow
Yellow
Dark Yellow
Light Green
Green
Dark Green
Light Blue
Blue
Dark Blue
Light Purple
Purple
Dark Purple
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<a class="btn pt-ring-btn-primary pt-btn-sm-wide pt-round-0 pt-ma-10" href="#">Primary</a>
<a class="btn pt-ring-btn-accent pt-btn-sm-wide pt-round-0 pt-ma-10" href="#">Accent</a>
<a class="btn pt-ring-btn-secondary pt-btn-sm-wide pt-round-0 pt-ma-10" href="#">Secondary</a>
<a class="btn pt-ring-btn-black pt-btn-sm-wide pt-round-0 pt-ma-10" href="#">Black</a>
<a class="btn pt-ring-btn-gray-light pt-btn-sm-wide pt-round-0 pt-ma-10" href="#">Light Gray</a>
<a class="btn pt-ring-btn-gray pt-btn-sm-wide pt-round-0 pt-ma-10" href="#">Gray</a>
<a class="btn pt-ring-btn-gray-dark pt-btn-sm-wide pt-round-0 pt-ma-10" href="#">Dark Gray</a>
<a class="btn pt-ring-btn-red-light pt-btn-sm-wide pt-round-0 pt-ma-10" href="#">Light Red</a>
<a class="btn pt-ring-btn-red pt-btn-sm-wide pt-round-0 pt-ma-10" href="#">Red</a>
<a class="btn pt-ring-btn-red-dark pt-btn-sm-wide pt-round-0 pt-ma-10" href="#">Dark Red</a>
<a class="btn pt-ring-btn-orange-light pt-btn-sm-wide pt-round-0 pt-ma-10" href="#">Light Orange</a>
<a class="btn pt-ring-btn-orange pt-btn-sm-wide pt-round-0 pt-ma-10" href="#">Orange</a>
<a class="btn pt-ring-btn-orange-dark pt-btn-sm-wide pt-round-0 pt-ma-10" href="#">Dark Orange</a>
<a class="btn pt-ring-btn-yellow-light pt-btn-sm-wide pt-round-0 pt-ma-10" href="#">Light Yellow</a>
<a class="btn pt-ring-btn-yellow pt-btn-sm-wide pt-round-0 pt-ma-10" href="#">Yellow</a>
<a class="btn pt-ring-btn-yellow-dark pt-btn-sm-wide pt-round-0 pt-ma-10" href="#">Dark Yellow</a>
<a class="btn pt-ring-btn-green-light pt-btn-sm-wide pt-round-0 pt-ma-10" href="#">Light Green</a>
<a class="btn pt-ring-btn-green pt-btn-sm-wide pt-round-0 pt-ma-10" href="#">Green</a>
<a class="btn pt-ring-btn-green-dark pt-btn-sm-wide pt-round-0 pt-ma-10" href="#">Dark Green</a>
<a class="btn pt-ring-btn-blue-light pt-btn-sm-wide pt-round-0 pt-ma-10" href="#">Light Blue</a>
<a class="btn pt-ring-btn-blue pt-btn-sm-wide pt-round-0 pt-ma-10" href="#">Blue</a>
<a class="btn pt-ring-btn-blue-dark pt-btn-sm-wide pt-round-0 pt-ma-10" href="#">Dark Blue</a>
<a class="btn pt-ring-btn-purple-light pt-btn-sm-wide pt-round-0 pt-ma-10" href="#">Light Purple</a>
<a class="btn pt-ring-btn-purple pt-btn-sm-wide pt-round-0 pt-ma-10" href="#">Purple</a>
<a class="btn pt-ring-btn-purple-dark pt-btn-sm-wide pt-round-0 pt-ma-10" href="#">Dark Purple</a>
Skewed Buttons
Create skewed buttons with .pt-n-skew-(degrees). Use .pt-skew-(degrees) d-block to normalize the text, keeping it readable.
Primary
Accent
Secondary
Black
Light Gray
Gray
Dark Gray
Light Red
Red
Dark Red
Light Orange
Orange
Dark Orange
Light Yellow
Yellow
Dark Yellow
Light Green
Green
Dark Green
Light Blue
Blue
Dark Blue
Light Purple
Purple
Dark Purple
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<a class="btn pt-btn-primary pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Primary</span></a>
<a class="btn pt-btn-secondary pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Accent</span></a>
<a class="btn pt-btn-accent pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Secondary</span></a>
<a class="btn pt-btn-black pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Black</span></a>
<a class="btn pt-btn-gray-light pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Gray</span></a>
<a class="btn pt-btn-gray pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Gray</span></a>
<a class="btn pt-btn-gray-dark pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Gray</span></a>
<a class="btn pt-btn-red-light pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Red</span></a>
<a class="btn pt-btn-red pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Red</span></a>
<a class="btn pt-btn-red-dark pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Red</span></a>
<a class="btn pt-btn-orange-light pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Orange</span></a>
<a class="btn pt-btn-orange pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Orange</span></a>
<a class="btn pt-btn-orange-dark pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Orange</span></a>
<a class="btn pt-btn-yellow-light pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Yellow</span></a>
<a class="btn pt-btn-yellow pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Yellow</span></a>
<a class="btn pt-btn-yellow-dark pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Yellow</span></a>
<a class="btn pt-btn-green-light pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Green</span></a>
<a class="btn pt-btn-green pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Green</span></a>
<a class="btn pt-btn-green-dark pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Green</span></a>
<a class="btn pt-btn-blue-light pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Blue</span></a>
<a class="btn pt-btn-blue pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Blue</span></a>
<a class="btn pt-btn-blue-dark pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Blue</span></a>
<a class="btn pt-btn-purple-light pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Purple</span></a>
<a class="btn pt-btn-purple pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Purple</span></a>
<a class="btn pt-btn-purple-dark pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Purple</span></a>
Skewed Outline Buttons
Create skewed outline buttons by combining .pt-n-skew-(degrees) for the button angle and .pt-skew-(degrees) d-block to keep text readable. Add .pt-btn-outline-(color) to define the border and text color.
Primary
Accent
Secondary
Black
Light Gray
Gray
Dark Gray
Light Red
Red
Dark Red
Light Orange
Orange
Dark Orange
Light Yellow
Yellow
Dark Yellow
Light Green
Green
Dark Green
Light Blue
Blue
Dark Blue
Light Purple
Purple
Dark Purple
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<a class="btn pt-btn-outline-primary pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Primary</span></a>
<a class="btn pt-btn-outline-accent pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Accent</span></a>
<a class="btn pt-btn-outline-secondary pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Secondary</span></a>
<a class="btn pt-btn-outline-black pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Black</span></a>
<a class="btn pt-btn-outline-gray-light pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Gray</span></a>
<a class="btn pt-btn-outline-gray pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Gray</span></a>
<a class="btn pt-btn-outline-gray-dark pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Gray</span></a>
<a class="btn pt-btn-outline-red-light pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Red</span></a>
<a class="btn pt-btn-outline-red pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Red</span></a>
<a class="btn pt-btn-outline-red-dark pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Red</span></a>
<a class="btn pt-btn-outline-orange-light pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Orange</span></a>
<a class="btn pt-btn-outline-orange pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Orange</span></a>
<a class="btn pt-btn-outline-orange-dark pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Orange</span></a>
<a class="btn pt-btn-outline-yellow-light pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Yellow</span></a>
<a class="btn pt-btn-outline-yellow pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Yellow</span></a>
<a class="btn pt-btn-outline-yellow-dark pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Yellow</span></a>
<a class="btn pt-btn-outline-green-light pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Green</span></a>
<a class="btn pt-btn-outline-green pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Green</span></a>
<a class="btn pt-btn-outline-green-dark pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Green</span></a>
<a class="btn pt-btn-outline-blue-light pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Blue</span></a>
<a class="btn pt-btn-outline-blue pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Blue</span></a>
<a class="btn pt-btn-outline-blue-dark pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Blue</span></a>
<a class="btn pt-btn-outline-purple-light pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Purple</span></a>
<a class="btn pt-btn-outline-purple pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Purple</span></a>
<a class="btn pt-btn-outline-purple-dark pt-btn-sm-wide pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Purple</span></a>
Skewed Shadow Buttons
Skewed shadow buttons are made by applying .pt-n-skew-(degrees) to the button and .pt-skew-(degrees) d-block to normalize text. Enhance with .pt-btn-shadow-(depth)-(darkness) for depth and emphasis.
Primary
Accent
Secondary
Black
Light Gray
Gray
Dark Gray
Light Red
Red
Dark Red
Light Orange
Orange
Dark Orange
Light Yellow
Yellow
Dark Yellow
Light Green
Green
Dark Green
Light Blue
Blue
Dark Blue
Light Purple
Purple
Dark Purple
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<a class="btn pt-btn-primary pt-btn-sm-wide pt-btn-shadow-4-20 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Primary</span></a>
<a class="btn pt-btn-secondary pt-btn-sm-wide pt-btn-shadow-4-20 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Accent</span></a>
<a class="btn pt-btn-accent pt-btn-sm-wide pt-btn-shadow-4-20 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Secondary</span></a>
<a class="btn pt-btn-black pt-btn-sm-wide pt-btn-shadow-4-20 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Black</span></a>
<a class="btn pt-btn-gray-light pt-btn-sm-wide pt-btn-shadow-4-20 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Gray</span></a>
<a class="btn pt-btn-gray pt-btn-sm-wide pt-btn-shadow-4-20 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Gray</span></a>
<a class="btn pt-btn-gray-dark pt-btn-sm-wide pt-btn-shadow-4-20 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Gray</span></a>
<a class="btn pt-btn-red-light pt-btn-sm-wide pt-btn-shadow-4-20 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Red</span></a>
<a class="btn pt-btn-red pt-btn-sm-wide pt-btn-shadow-4-20 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Red</span></a>
<a class="btn pt-btn-red-dark pt-btn-sm-wide pt-btn-shadow-4-20 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Red</span></a>
<a class="btn pt-btn-orange-light pt-btn-sm-wide pt-btn-shadow-4-20 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Orange</span></a>
<a class="btn pt-btn-orange pt-btn-sm-wide pt-btn-shadow-4-20 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Orange</span></a>
<a class="btn pt-btn-orange-dark pt-btn-sm-wide pt-btn-shadow-4-20 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Orange</span></a>
<a class="btn pt-btn-yellow-light pt-btn-sm-wide pt-btn-shadow-4-20 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Yellow</span></a>
<a class="btn pt-btn-yellow pt-btn-sm-wide pt-btn-shadow-4-20 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Yellow</span></a>
<a class="btn pt-btn-yellow-dark pt-btn-sm-wide pt-btn-shadow-4-20 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Yellow</span></a>
<a class="btn pt-btn-green-light pt-btn-sm-wide pt-btn-shadow-4-20 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Green</span></a>
<a class="btn pt-btn-green pt-btn-sm-wide pt-btn-shadow-4-20 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Green</span></a>
<a class="btn pt-btn-green-dark pt-btn-sm-wide pt-btn-shadow-4-20 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Green</span></a>
<a class="btn pt-btn-blue-light pt-btn-sm-wide pt-btn-shadow-4-20 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Blue</span></a>
<a class="btn pt-btn-blue pt-btn-sm-wide pt-btn-shadow-4-20 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Blue</span></a>
<a class="btn pt-btn-blue-dark pt-btn-sm-wide pt-btn-shadow-4-20 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Blue</span></a>
<a class="btn pt-btn-purple-light pt-btn-sm-wide pt-btn-shadow-4-20 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Purple</span></a>
<a class="btn pt-btn-purple pt-btn-sm-wide pt-btn-shadow-4-20 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Purple</span></a>
<a class="btn pt-btn-purple-dark pt-btn-sm-wide pt-btn-shadow-4-20 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Purple</span></a>
Skewed Inset Line Buttons
Apply .pt-n-skew-(degrees) for angled styling and .pt-skew-(degrees) d-block to keep text aligned. Use .pt-btn-brd-inset-(depth) to add an inner border line that breaks up the solid button design.
Primary
Accent
Secondary
Black
Light Gray
Gray
Dark Gray
Light Red
Red
Dark Red
Light Orange
Orange
Dark Orange
Light Yellow
Yellow
Dark Yellow
Light Green
Green
Dark Green
Light Blue
Blue
Dark Blue
Light Purple
Purple
Dark Purple
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<a class="btn pt-btn-primary pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Primary</span></a>
<a class="btn pt-btn-secondary pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Accent</span></a>
<a class="btn pt-btn-accent pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Secondary</span></a>
<a class="btn pt-btn-black pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Black</span></a>
<a class="btn pt-btn-gray-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Gray</span></a>
<a class="btn pt-btn-gray pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Gray</span></a>
<a class="btn pt-btn-gray-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Gray</span></a>
<a class="btn pt-btn-red-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Red</span></a>
<a class="btn pt-btn-red pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Red</span></a>
<a class="btn pt-btn-red-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Red</span></a>
<a class="btn pt-btn-orange-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Orange</span></a>
<a class="btn pt-btn-orange pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Orange</span></a>
<a class="btn pt-btn-orange-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Orange</span></a>
<a class="btn pt-btn-yellow-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Yellow</span></a>
<a class="btn pt-btn-yellow pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Yellow</span></a>
<a class="btn pt-btn-yellow-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Yellow</span></a>
<a class="btn pt-btn-green-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Green</span></a>
<a class="btn pt-btn-green pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Green</span></a>
<a class="btn pt-btn-green-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Green</span></a>
<a class="btn pt-btn-blue-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Blue</span></a>
<a class="btn pt-btn-blue pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Blue</span></a>
<a class="btn pt-btn-blue-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Blue</span></a>
<a class="btn pt-btn-purple-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Purple</span></a>
<a class="btn pt-btn-purple pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Purple</span></a>
<a class="btn pt-btn-purple-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Purple</span></a>
Skewed Inset Outline Buttons
Combine .pt-n-skew-(degrees) and .pt-skew-(degrees) d-block to skew the button while keeping text legible. Add .pt-btn-outline-(color) with .pt-btn-brd-inset-(depth) to create outlined buttons with extra detail from an inset border.
Primary
Accent
Secondary
Black
Light Gray
Gray
Dark Gray
Light Red
Red
Dark Red
Light Orange
Orange
Dark Orange
Light Yellow
Yellow
Dark Yellow
Light Green
Green
Dark Green
Light Blue
Blue
Dark Blue
Light Purple
Purple
Dark Purple
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<a class="btn pt-btn-outline-primary pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Primary</span></a>
<a class="btn pt-btn-outline-accent pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Accent</span></a>
<a class="btn pt-btn-outline-secondary pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Secondary</span></a>
<a class="btn pt-btn-outline-black pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Black</span></a>
<a class="btn pt-btn-outline-gray-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Gray</span></a>
<a class="btn pt-btn-outline-gray pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Gray</span></a>
<a class="btn pt-btn-outline-gray-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Gray</span></a>
<a class="btn pt-btn-outline-red-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Red</span></a>
<a class="btn pt-btn-outline-red pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Red</span></a>
<a class="btn pt-btn-outline-red-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Red</span></a>
<a class="btn pt-btn-outline-orange-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Orange</span></a>
<a class="btn pt-btn-outline-orange pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Orange</span></a>
<a class="btn pt-btn-outline-orange-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Orange</span></a>
<a class="btn pt-btn-outline-yellow-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Yellow</span></a>
<a class="btn pt-btn-outline-yellow pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Yellow</span></a>
<a class="btn pt-btn-outline-yellow-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Yellow</span></a>
<a class="btn pt-btn-outline-green-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Green</span></a>
<a class="btn pt-btn-outline-green pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Green</span></a>
<a class="btn pt-btn-outline-green-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Green</span></a>
<a class="btn pt-btn-outline-blue-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Blue</span></a>
<a class="btn pt-btn-outline-blue pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Blue</span></a>
<a class="btn pt-btn-outline-blue-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Blue</span></a>
<a class="btn pt-btn-outline-purple-light pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Light Purple</span></a>
<a class="btn pt-btn-outline-purple pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Purple</span></a>
<a class="btn pt-btn-outline-purple-dark pt-btn-sm-wide pt-btn-brd-inset-3 pt-n-skew-15 pt-round-5 pt-ma-5" href="#"><span class="pt-skew-15 d-block">Dark Purple</span></a>
Skewed Ring Buttons
Skewed ring buttons are styled with .pt-n-skew-(degrees) and corrected with .pt-skew-(degrees) d-block for proper text alignment. Apply .pt-ring-btn-(color) to add a colored ring border that emphasizes the button's solid background.
Primary
Accent
Secondary
Black
Light Gray
Gray
Dark Gray
Light Red
Red
Dark Red
Light Orange
Orange
Dark Orange
Light Yellow
Yellow
Dark Yellow
Light Green
Green
Dark Green
Light Blue
Blue
Dark Blue
Light Purple
Purple
Dark Purple
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<a class="btn pt-ring-btn-primary pt-btn-sm-wide pt-n-skew-15 pt-round-0 pt-ma-10" href="#"><span class="pt-skew-15 d-block">Primary</span></a>
<a class="btn pt-ring-btn-accent pt-btn-sm-wide pt-n-skew-15 pt-round-0 pt-ma-10" href="#"><span class="pt-skew-15 d-block">Accent</span></a>
<a class="btn pt-ring-btn-secondary pt-btn-sm-wide pt-n-skew-15 pt-round-0 pt-ma-10" href="#"><span class="pt-skew-15 d-block">Secondary</span></a>
<a class="btn pt-ring-btn-black pt-btn-sm-wide pt-n-skew-15 pt-round-0 pt-ma-10" href="#"><span class="pt-skew-15 d-block">Black</span></a>
<a class="btn pt-ring-btn-gray-light pt-btn-sm-wide pt-n-skew-15 pt-round-0 pt-ma-10" href="#"><span class="pt-skew-15 d-block">Light Gray</span></a>
<a class="btn pt-ring-btn-gray pt-btn-sm-wide pt-n-skew-15 pt-round-0 pt-ma-10" href="#"><span class="pt-skew-15 d-block">Gray</span></a>
<a class="btn pt-ring-btn-gray-dark pt-btn-sm-wide pt-n-skew-15 pt-round-0 pt-ma-10" href="#"><span class="pt-skew-15 d-block">Dark Gray</span></a>
<a class="btn pt-ring-btn-red-light pt-btn-sm-wide pt-n-skew-15 pt-round-0 pt-ma-10" href="#"><span class="pt-skew-15 d-block">Light Red</span></a>
<a class="btn pt-ring-btn-red pt-btn-sm-wide pt-n-skew-15 pt-round-0 pt-ma-10" href="#"><span class="pt-skew-15 d-block">Red</span></a>
<a class="btn pt-ring-btn-red-dark pt-btn-sm-wide pt-n-skew-15 pt-round-0 pt-ma-10" href="#"><span class="pt-skew-15 d-block">Dark Red</span></a>
<a class="btn pt-ring-btn-orange-light pt-btn-sm-wide pt-n-skew-15 pt-round-0 pt-ma-10" href="#"><span class="pt-skew-15 d-block">Light Orange</span></a>
<a class="btn pt-ring-btn-orange pt-btn-sm-wide pt-n-skew-15 pt-round-0 pt-ma-10" href="#"><span class="pt-skew-15 d-block">Orange</span></a>
<a class="btn pt-ring-btn-orange-dark pt-btn-sm-wide pt-n-skew-15 pt-round-0 pt-ma-10" href="#"><span class="pt-skew-15 d-block">Dark Orange</span></a>
<a class="btn pt-ring-btn-yellow-light pt-btn-sm-wide pt-n-skew-15 pt-round-0 pt-ma-10" href="#"><span class="pt-skew-15 d-block">Light Yellow</span></a>
<a class="btn pt-ring-btn-yellow pt-btn-sm-wide pt-n-skew-15 pt-round-0 pt-ma-10" href="#"><span class="pt-skew-15 d-block">Yellow</span></a>
<a class="btn pt-ring-btn-yellow-dark pt-btn-sm-wide pt-n-skew-15 pt-round-0 pt-ma-10" href="#"><span class="pt-skew-15 d-block">Dark Yellow</span></a>
<a class="btn pt-ring-btn-green-light pt-btn-sm-wide pt-n-skew-15 pt-round-0 pt-ma-10" href="#"><span class="pt-skew-15 d-block">Light Green</span></a>
<a class="btn pt-ring-btn-green pt-btn-sm-wide pt-n-skew-15 pt-round-0 pt-ma-10" href="#"><span class="pt-skew-15 d-block">Green</span></a>
<a class="btn pt-ring-btn-green-dark pt-btn-sm-wide pt-n-skew-15 pt-round-0 pt-ma-10" href="#"><span class="pt-skew-15 d-block">Dark Green</span></a>
<a class="btn pt-ring-btn-blue-light pt-btn-sm-wide pt-n-skew-15 pt-round-0 pt-ma-10" href="#"><span class="pt-skew-15 d-block">Light Blue</span></a>
<a class="btn pt-ring-btn-blue pt-btn-sm-wide pt-n-skew-15 pt-round-0 pt-ma-10" href="#"><span class="pt-skew-15 d-block">Blue</span></a>
<a class="btn pt-ring-btn-blue-dark pt-btn-sm-wide pt-n-skew-15 pt-round-0 pt-ma-10" href="#"><span class="pt-skew-15 d-block">Dark Blue</span></a>
<a class="btn pt-ring-btn-purple-light pt-btn-sm-wide pt-n-skew-15 pt-round-0 pt-ma-10" href="#"><span class="pt-skew-15 d-block">Light Purple</span></a>
<a class="btn pt-ring-btn-purple pt-btn-sm-wide pt-n-skew-15 pt-round-0 pt-ma-10" href="#"><span class="pt-skew-15 d-block">Purple</span></a>
<a class="btn pt-ring-btn-purple-dark pt-btn-sm-wide pt-n-skew-15 pt-round-0 pt-ma-10" href="#"><span class="pt-skew-15 d-block">Dark Purple</span></a>
Gradient Buttons
Apply .pt-btn-gradient-(gradient number) to fill buttons with smooth gradient backgrounds for extra visual impact.
1
2
3
4
<a class="btn pt-btn-gradient-1 pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Gradient Button</a>
<a class="btn pt-btn-gradient-2 pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Gradient Button</a>
<a class="btn pt-btn-gradient-3 pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Gradient Button</a>
<a class="btn pt-btn-gradient-4 pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Gradient Button</a>
Gradient Outline Buttons
Create gradient outline buttons by pairing .pt-btn-outline-(color) with .pt-btn-gradient-(gradient number). This applies a smooth gradient effect to the border and text, giving outlined buttons a vibrant look.
1
2
3
4
<a class="btn pt-btn-outline-gradient-1 pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Gradient Button</a>
<a class="btn pt-btn-outline-gradient-2 pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Gradient Button</a>
<a class="btn pt-btn-outline-gradient-3 pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Gradient Button</a>
<a class="btn pt-btn-outline-gradient-4 pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Gradient Button</a>
Button Sizing
Control button proportions with .pt-btn-(size), adjusting both text size and button height for consistency.
Extra Small
Small
Medium
Large
Extra Large
Extra Extra Large
Extra Small Small Medium Large Extra Large Extra Extra Large
Extra Small Small Medium Large Extra Large Extra Extra Large
Extra Small Small Medium Large Extra Large Extra Extra Large
Extra Small Small Medium Large Extra Large Extra Extra Large
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<a class="btn pt-btn-primary pt-btn-xs pt-round-5 pt-ma-5" href="#">Extra Small</a>
<a class="btn pt-btn-primary pt-btn-sm pt-round-5 pt-ma-5" href="#">Small</a>
<a class="btn pt-btn-primary pt-btn-md pt-round-5 pt-ma-5" href="#">Medium</a>
<a class="btn pt-btn-primary pt-btn-lg pt-round-5 pt-ma-5" href="#">Large</a>
<a class="btn pt-btn-primary pt-btn-xl pt-round-5 pt-ma-5" href="#">Extra Large</a>
<a class="btn pt-btn-primary pt-btn-xxl pt-round-5 pt-ma-5" href="#">Extra Extra Large</a>
<br/>
<a class="btn pt-btn-secondary pt-btn-xs pt-round-5 pt-ma-5" href="#">Extra Small</a>
<a class="btn pt-btn-secondary pt-btn-sm pt-round-5 pt-ma-5" href="#">Small</a>
<a class="btn pt-btn-secondary pt-btn-md pt-round-5 pt-ma-5" href="#">Medium</a>
<a class="btn pt-btn-secondary pt-btn-lg pt-round-5 pt-ma-5" href="#">Large</a>
<a class="btn pt-btn-secondary pt-btn-xl pt-round-5 pt-ma-5" href="#">Extra Large</a>
<a class="btn pt-btn-secondary pt-btn-xxl pt-round-5 pt-ma-5" href="#">Extra Extra Large</a>
<br/>
<a class="btn pt-btn-outline-primary pt-btn-xs pt-round-5 pt-ma-5" href="#">Extra Small</a>
<a class="btn pt-btn-outline-primary pt-btn-sm pt-round-5 pt-ma-5" href="#">Small</a>
<a class="btn pt-btn-outline-primary pt-btn-md pt-round-5 pt-ma-5" href="#">Medium</a>
<a class="btn pt-btn-outline-primary pt-btn-lg pt-round-5 pt-ma-5" href="#">Large</a>
<a class="btn pt-btn-outline-primary pt-btn-xl pt-round-5 pt-ma-5" href="#">Extra Large</a>
<a class="btn pt-btn-outline-primary pt-btn-xxl pt-round-5 pt-ma-5" href="#">Extra Extra Large</a>
Button Width
Apply .pt-btn-(size)-wide to create wider buttons, automatically scaling text and height to match.
Extra Small
Small
Medium
Large
Extra Large
Extra Extra Large
Extra Small Small Medium Large Extra Large Extra Extra Large
Extra Small Small Medium Large Extra Large Extra Extra Large
Extra Small Small Medium Large Extra Large Extra Extra Large
Extra Small Small Medium Large Extra Large Extra Extra Large
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<a class="btn pt-btn-primary pt-btn-xs-wide pt-round-5 pt-ma-5" href="#">Extra Small</a>
<a class="btn pt-btn-primary pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Small</a>
<a class="btn pt-btn-primary pt-btn-md-wide pt-round-5 pt-ma-5" href="#">Medium</a>
<a class="btn pt-btn-primary pt-btn-lg-wide pt-round-5 pt-ma-5" href="#">Large</a>
<a class="btn pt-btn-primary pt-btn-xl-wide pt-round-5 pt-ma-5" href="#">Extra Large</a>
<a class="btn pt-btn-primary pt-btn-xxl-wide pt-round-5 pt-ma-5" href="#">Extra Extra Large</a>
<br/>
<a class="btn pt-btn-secondary pt-btn-xs-wide pt-round-5 pt-ma-5" href="#">Extra Small</a>
<a class="btn pt-btn-secondary pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Small</a>
<a class="btn pt-btn-secondary pt-btn-md-wide pt-round-5 pt-ma-5" href="#">Medium</a>
<a class="btn pt-btn-secondary pt-btn-lg-wide pt-round-5 pt-ma-5" href="#">Large</a>
<a class="btn pt-btn-secondary pt-btn-xl-wide pt-round-5 pt-ma-5" href="#">Extra Large</a>
<a class="btn pt-btn-secondary pt-btn-xxl-wide pt-round-5 pt-ma-5" href="#">Extra Extra Large</a>
<br/>
<a class="btn pt-btn-outline-primary pt-btn-xs-wide pt-round-5 pt-ma-5" href="#">Extra Small</a>
<a class="btn pt-btn-outline-primary pt-btn-sm-wide pt-round-5 pt-ma-5" href="#">Small</a>
<a class="btn pt-btn-outline-primary pt-btn-md-wide pt-round-5 pt-ma-5" href="#">Medium</a>
<a class="btn pt-btn-outline-primary pt-btn-lg-wide pt-round-5 pt-ma-5" href="#">Large</a>
<a class="btn pt-btn-outline-primary pt-btn-xl-wide pt-round-5 pt-ma-5" href="#">Extra Large</a>
<a class="btn pt-btn-outline-primary pt-btn-xxl-wide pt-round-5 pt-ma-5" href="#">Extra Extra Large</a>
Block Buttons
Apply .d-block to turn any button into a block-level element, stretching it to fit its container's full width.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="row">
<div class="col-6">
<a class="btn pt-btn-primary pt-btn-xxl d-block pt-round-5 pt-ma-5" href="#">Extra Extra Large</a>
<a class="btn pt-btn-primary pt-btn-xl d-block pt-round-5 pt-ma-5" href="#">Extra Large</a>
<a class="btn pt-btn-primary pt-btn-lg d-block pt-round-5 pt-ma-5" href="#">Large</a>
<a class="btn pt-btn-primary pt-btn-md d-block pt-round-5 pt-ma-5" href="#">Medium</a>
<a class="btn pt-btn-primary pt-btn-sm d-block pt-round-5 pt-ma-5" href="#">Small</a>
<a class="btn pt-btn-primary pt-btn-xs d-block pt-round-5 pt-ma-5" href="#">Extra Small</a>
</div>
<div class="col-6">
<a class="btn pt-btn-outline-primary pt-btn-xxl d-block pt-round-5 pt-ma-5" href="#">Extra Extra Large</a>
<a class="btn pt-btn-outline-primary pt-btn-xl d-block pt-round-5 pt-ma-5" href="#">Extra Large</a>
<a class="btn pt-btn-outline-primary pt-btn-lg d-block pt-round-5 pt-ma-5" href="#">Large</a>
<a class="btn pt-btn-outline-primary pt-btn-md d-block pt-round-5 pt-ma-5" href="#">Medium</a>
<a class="btn pt-btn-outline-primary pt-btn-sm d-block pt-round-5 pt-ma-5" href="#">Small</a>
<a class="btn pt-btn-outline-primary pt-btn-xs d-block pt-round-5 pt-ma-5" href="#">Extra Small</a>
</div>