UNPKG

bootstrap-directional-buttons

Version:

Directional / Arrow buttons for Bootstrap

github.com/westonganger/bootstrap-directional-button

westonganger/bootstrap-directional-buttons

122 lines (103 loc) • 5.81 kB
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
<!DOCTYPE html> <html> <head> <meta name="description" content="Bootstrap Directional Buttons Demo"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Bootstrap Directional Buttons</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <!-- <link href="https://cdn.rawgit.com/westonganger/bootstrap-directional-buttons/master/dist/bootstrap-directional-buttons.css" rel="stylesheet" type="text/css" /> --> <link href="./dist/bootstrap-directional-buttons.css" rel="stylesheet" type="text/css" /> <style> body{ padding: 40px; padding-top: 0px; } h4{ margin-top: 35px; } h5{ margin-top: 15px; } h4, h5{ font-weight: bold; } </style> </head> <body> <h4>Regular Buttons</h4> <button type="button" class="btn btn btn-default btn-arrow-left">Default</button> <button type="button" class="btn btn btn-primary btn-arrow-left">Primary</button> <button type="button" class="btn btn btn-success btn-arrow-left">Success</button> <button type="button" class="btn btn btn-link">Link</button> <button type="button" class="btn btn-info btn-arrow-right">Info</button> <button type="button" class="btn btn-warning btn-arrow-right">Warning</button> <button type="button" class="btn btn-danger btn-arrow-right">Danger</button> <h5>Inside .btn-group</h5> <div class='btn-group'> <button type="button" class="btn btn-default btn-arrow-left">Default</button> <button type="button" class="btn btn-primary btn-arrow-left">Primary</button> <button type="button" class="btn btn-success btn-arrow-left">Success</button> <button type="button" class="btn btn-link">Link</button> <button type="button" class="btn btn-info btn-arrow-right">Info</button> <button type="button" class="btn btn-warning btn-arrow-right">Warning</button> <button type="button" class="btn btn-danger btn-arrow-right">Danger</button> </div> <h4>Large Buttons</h4> <button type="button" class="btn btn-lg btn btn-default btn-arrow-left">Default</button> <button type="button" class="btn btn-lg btn-primary btn-arrow-left">Primary</button> <button type="button" class="btn btn-lg btn-success btn-arrow-left">Success</button> <button type="button" class="btn btn-lg btn-link">Link</button> <button type="button" class="btn btn-lg btn-info btn-arrow-right">Info</button> <button type="button" class="btn btn-lg btn-warning btn-arrow-right">Warning</button> <button type="button" class="btn btn-lg btn-danger btn-arrow-right">Danger</button> <h5>Inside .btn-group</h5> <div class='btn-group btn-group-lg'> <button type="button" class="btn btn-default btn-arrow-left">Default</button> <button type="button" class="btn btn-primary btn-arrow-left">Primary</button> <button type="button" class="btn btn-success btn-arrow-left">Success</button> <button type="button" class="btn btn-link">Link</button> <button type="button" class="btn btn-info btn-arrow-right">Info</button> <button type="button" class="btn btn-warning btn-arrow-right">Warning</button> <button type="button" class="btn btn-danger btn-arrow-right">Danger</button> </div> <h4>Small Buttons</h4> <button type="button" class="btn btn-sm btn btn-default btn-arrow-left">Default</button> <button type="button" class="btn btn-sm btn-primary btn-arrow-left">Primary</button> <button type="button" class="btn btn-sm btn-success btn-arrow-left">Success</button> <button type="button" class="btn btn-sm btn-link">Link</button> <button type="button" class="btn btn-sm btn-info btn-arrow-right">Info</button> <button type="button" class="btn btn-sm btn-warning btn-arrow-right">Warning</button> <button type="button" class="btn btn-sm btn-danger btn-arrow-right">Danger</button> <h5>Inside .btn-group</h5> <div class='btn-group btn-group-sm'> <button type="button" class="btn btn btn-default btn-arrow-left">Default</button> <button type="button" class="btn btn-primary btn-arrow-left">Primary</button> <button type="button" class="btn btn-success btn-arrow-left">Success</button> <button type="button" class="btn btn-link">Link</button> <button type="button" class="btn btn-info btn-arrow-right">Info</button> <button type="button" class="btn btn-warning btn-arrow-right">Warning</button> <button type="button" class="btn btn-danger btn-arrow-right">Danger</button> </div> <h4>Extra Small Buttons</h4> <button type="button" class="btn btn-xs btn btn-default btn-arrow-left">Default</button> <button type="button" class="btn btn-xs btn-primary btn-arrow-left">Primary</button> <button type="button" class="btn btn-xs btn-success btn-arrow-left">Success</button> <button type="button" class="btn btn-xs btn-link">Link</button> <button type="button" class="btn btn-xs btn-info btn-arrow-right">Info</button> <button type="button" class="btn btn-xs btn-warning btn-arrow-right">Warning</button> <button type="button" class="btn btn-xs btn-danger btn-arrow-right">Danger</button> <h5>Inside .btn-group</h5> <div class='btn-group btn-group-xs'> <button type="button" class="btn btn-default btn-arrow-left">Default</button> <button type="button" class="btn btn-primary btn-arrow-left">Primary</button> <button type="button" class="btn btn-success btn-arrow-left">Success</button> <button type="button" class="btn btn-link">Link</button> <button type="button" class="btn btn-info btn-arrow-right">Info</button> <button type="button" class="btn btn-warning btn-arrow-right">Warning</button> <button type="button" class="btn btn-danger btn-arrow-right">Danger</button> </div> </body> </html>