button-prototype/index.html at master · HenryAmm/button-prototype · GitHub

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
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<style>
    h1 {
        margin-bottom: 25px;
    }

    h2 {
        margin-bottom: 15px;
        margin-top: 25px;
    }

    h3 {
        margin-bottom: 10px;
        margin-top: 15px;
    }


/* Button style overwrite */

    .btn {
        border-radius: 0;
        font-size: 15px;
    }

    .btn-sm {
        font-size: 12px;
    }

    .btn-lg {
        font-size: 20px;
    }

    .btn-icon {
        border-radius: 50%;
        width: 40px;
        background-color: transparent;
    }

    .btn-icon:hover {
        background-color: #EEEEEE;
    }

    .btn-secondary {
        background-color: #EEEEEE;
border-color: #EEEEEE;
        color: #616161;
    }

    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-secondary:active {
        background-color: #E0E0E0 !important;
        border-color: #E0E0E0 !important;
         color: #424242 !important;
    }

    .btn-success {
        background-color: #4CAF50;
        border-color: #4CAF50;
    }

    .btn-danger {
        background-color: #F44336;
        border-color: #F44336;
    }

    .btn-primary {
        background-color: #448AFF;
        border-color: #448AFF;

    }

    .btn-warning {
        background-color: #FFC107;
        border-color: #FFC107;
    }

    .btn-info {
        background-color: #00BCD4;
        border-color: #00BCD4;
    }

</style>

<body>
    <div class="container mt-5">
        <h1>NOWA Button Refactoring Prototype</h1>
        <h2>Text Buttons</h2>
        <h3>Button Sizes</h3>

        <button type="button" class="btn btn-secondary btn-sm">Small button</button>
        <a class="btn btn-secondary" href="#">Normal button</a>
        <button type="button" class="btn btn-secondary btn-lg">Large button</button>

        <h3>Block buttons</h3>

        <button type="button" class="btn btn-primary btn-sm btn-block">Block level button</button>
        <button type="button" class="btn btn-primary btn-block">Block level button</button>
        <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>

        <h3>Button Types</h3>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-secondary">Secondary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-light">Light</button>
        <button type="button" class="btn btn-dark">Dark</button>

        <button type="button" class="btn btn-link">Link</button>


        <h3>Outline Buttons</h3>
        <button type="button" class="btn btn-outline-primary">Primary</button>
        <button type="button" class="btn btn-outline-secondary">Secondary</button>
        <button type="button" class="btn btn-outline-success">Success</button>
        <button type="button" class="btn btn-outline-danger">Danger</button>
        <button type="button" class="btn btn-outline-warning">Warning</button>
        <button type="button" class="btn btn-outline-info">Info</button>
        <button type="button" class="btn btn-outline-light">Light</button>
        <button type="button" class="btn btn-outline-dark">Dark</button>

        <h3>Disabled button</h3>
        <button type="button" class="btn btn-primary" disabled>Primary button</button>
        <button type="button" class="btn btn-secondary" disabled>Button</button>


        <h2>Icon Buttons</h2>

        <button type="button" class="btn btn-icon"><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
     width="20" height="20"
     viewBox="0 0 50 50"
     style=";fill:#2980b9;"
     class="icon icons8-create"><g id="surface1"><path style=" " d="M 44.34375 2 C 43.402344 2 42.433594 2.347656 41.71875 3.0625 L 40.375 4.4375 L 45.5625 9.625 C 45.558594 9.628906 46.9375 8.28125 46.9375 8.28125 C 48.371094 6.847656 48.371094 4.496094 46.9375 3.0625 C 46.21875 2.34375 45.285156 2 44.34375 2 Z M 38.75 5.9375 L 16.03125 28.65625 L 15.96875 28.96875 L 15.03125 33.8125 L 14.71875 35.28125 L 16.1875 34.96875 L 21.03125 34.03125 L 21.34375 33.96875 L 44.0625 11.25 L 42.625 9.84375 L 20.375 32.0625 L 17.9375 29.625 L 40.15625 7.375 Z M 3 10 C 2.445313 10 2 10.449219 2 11 L 2 47 C 2 47.550781 2.445313 48 3 48 L 39 48 C 39.554688 48 40 47.550781 40 47 L 40 18 L 38 20 L 38 46 L 4 46 L 4 12 L 30 12 L 32 10 Z "></path></g></svg></button>


        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</div>
        </body>


</html>