-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbuttons.html
151 lines (145 loc) · 6.54 KB
/
buttons.html
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tuxedo CSS - Buttons</title>
<link rel="stylesheet" href="css/styles.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="js/tuxedo.js" charset="utf-8"></script>
</head>
<body>
<nav class="nav-dark fixed tablet-flex">
<header>
<a href="index.html"><img src="img/logo-thick-light.svg" alt="Tuxedo Logo"></a>
</header>
<ul class="mobile-nav flex-center">
<div class="hamburger"></div>
</ul>
<div class="flyout">
<div class="bar">
<header class="f-col-4">
<a href="index.html"><img src="img/logo-thick-light.svg" alt="Tuxedo Logo">
</a>
</header>
<div class="close f-col-1"></div>
</div>
<ul class="flyout-menu">
<li><a href="start.html">Getting Started</a></li>
<li class="fly-dropdown">Docs +
<ul class="dropdown-menu">
<li><a href="animations.html">Animations</a></li>
<li><a href="buttons.html">Buttons</a></li>
<li><a href="colors.html">Colors</a></li>
<li><a href="fonts.html">Fonts</a></li>
<li><a href="footers.html">Footers</a></li>
<li><a href="forms.html">Forms</a></li>
<li><a href="grid.html">Grid</a></li>
<li><a href="helpers.html">Helpers</a></li>
<li><a href="hero.html">Hero</a></li>
<li><a href="nav.html">Nav</a></li>
<li><a href="sidebar.html">Sidebar</a></li>
<li><a href="threejs.html">Three.js</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</nav>
<div class="side-bar bg-dark">
<head>
<a href="index.html"><img src="img/thin-logo-large.svg" alt="tuxedo logo"></a>
</head>
<ul class="underline-light">
<li><a href="start.html">Getting Started</a></li>
<li><a href="animations.html">Animations</a></li>
<li class="active"><a href="buttons.html">Buttons</a></li>
<li><a href="colors.html">Colors</a></li>
<li><a href="fonts.html">Fonts</a></li>
<li><a href="footers.html">Footers</a></li>
<li><a href="forms.html">Forms</a></li>
<li><a href="grid.html">Grid</a></li>
<li><a href="helpers.html">Helpers</a></li>
<li><a href="hero.html">Hero</a></li>
<li><a href="nav.html">Nav</a></li>
<li><a href="sidebar.html">Sidebar</a></li>
<li><a href="threejs.html">Three.js</a></li>
</ul>
<ul>
<li><a href="about.html">About</a></li>
</ul>
</div>
<div class="side-bar-content">
<h1 class="text-dark underline-dark">Buttons</h1>
<p>
Buttons are incredibly important to any website - otherwise how would the user know where to click? Tuxedo breaks buttons down into several easy-to-use classes.
</p>
<h3 class="text-dark">Dark Button</h3>
<p>This is the basic dark button. It is based of whatever your dark variable is set to in your globals.scss file. Hover over the button to give it a quick test drive. </p>
<div class="code-example">
<button type="button" class="btn-dark">Button</button>
</div>
<div class="code">
<xmp>
<button type="button" class="btn-dark">Button</button>
</xmp>
</div>
<h3 class="text-dark">Light Button</h3>
<p>This is the basic light button. It is based of whatever your light variable is set to in your globals.scss file. Hover over the button to give it a quick test drive.</p>
<div class="code-example">
<button type="button" class="btn-light">Button</button>
</div>
<div class="code">
<xmp>
<button type="button" class="btn-light">Button</button>
</xmp>
</div>
<h3 class="text-dark">Pop Button</h3>
<p>This is the basic pop of color button. It is based of whatever your color-pop variable is set to in your globals.scss file. Hover over the button to give it a quick test drive.</p>
<div class="code-example">
<button type="button" class="btn-pop">Button</button>
</div>
<div class="code">
<xmp>
<button type="button" class="btn-pop">Button</button>
</xmp>
</div>
<h3 class="text-dark">Dark Ghost Button</h3>
<p>This is the dark version of Tuxedo’s ghost button. Ghost buttons are only the suggestion of a button with a simple outline for clean design. It is based of whatever your dark variable is set to in your globals.scss file. Hover over the button to give it a quick test drive.</p>
<div class="code-example">
<button type="button" class="btn-ghost-dark">Ghost Button</button>
</div>
<div class="code">
<xmp>
<button type="button" class="btn-ghost-dark">Ghost Button</button>
</xmp>
</div>
<h3 class="text-dark">Light Ghost Button</h3>
<p>This is the light version of Tuxedo’s ghost button. It is based of whatever your light variable is set to in your globals.scss file. Since this button is a bit hard to see on a white background we threw a color behind it to make it visible. Hover over the button to give it a quick test drive. </p>
<div style="height: 95px; padding: 20px;"class="code-example bg-dark">
<button type="button" class="btn-ghost-light">Ghost Button</button>
</div>
<div class="code">
<xmp>
<button type="button" class="btn-ghost-light">Ghost Button</button>
</xmp>
</div>
<h3 class="text-dark">Pop Ghost Button</h3>
<p>This is the pop of color version of Tuxedo’s ghost button. It is based of whatever your color-pop variable is set to in your globals.scss file. Hover over the button to give it a quick test drive.</p>
<div class="code-example">
<button type="button" class="btn-ghost-pop">Ghost Button</button>
</div>
<div class="code">
<xmp>
<button type="button" class="btn-ghost-pop">Ghost Button</button>
</xmp>
</div>
</div>
<footer class="f-row responsive">
<small class="f-col-1 flex-center">2017 Erica Nafziger, All rights reserved.
</small>
<small class="f-col-1 flex-center">MIT License
</small>
</footer>
</body>
</html>