Skip to content

Commit c6837bc

Browse files
committed
Add buttons sizing classes
1 parent 6d4f694 commit c6837bc

File tree

4 files changed

+500
-422
lines changed

4 files changed

+500
-422
lines changed

source/app/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,27 @@ <h3 class="title">Disabled buttons</h3>
7171
<button href="#" class="btn btn-rounded" disabled>btn-rounded</button>
7272
<button href="#" class="btn btn-rounded btn-outlined" disabled>btn-outlined</button>
7373
</div>
74+
75+
<h3 class="title">Buttons Sizes</h3>
76+
<div class="divider"></div>
77+
78+
<div class="type-buttons">
79+
<button href="#" class="btn btn-primary gradient-green btn-small">btn-small</button>
80+
<button href="#" class="btn btn-primary gradient-purple">default size</button>
81+
<button href="#" class="btn btn-primary gradient-orange btn-large">btn-large</button>
82+
</div>
83+
84+
<div class="type-buttons">
85+
<button href="#" class="btn btn-rounded gradient-green btn-small">btn-small</button>
86+
<button href="#" class="btn btn-rounded gradient-purple">default size</button>
87+
<button href="#" class="btn btn-rounded gradient-orange btn-large">btn-large</button>
88+
</div>
89+
90+
<div class="type-buttons">
91+
<button href="#" class="btn btn-rounded btn-outlined green-btn btn-small">btn-small</button>
92+
<button href="#" class="btn btn-rounded btn-outlined purple-btn">default size</button>
93+
<button href="#" class="btn btn-rounded btn-outlined orange-btn btn-large">btn-large</button>
94+
</div>
7495
</div>
7596
<div class="container">
7697
<h3 class="title">Forms</h3>

source/app/styles/buttons.scss

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
@import "colors";
22

3-
.btn {
3+
.btn {
44
padding: 1rem 1.5rem;
55
color: #fff;
66
cursor: pointer;
77
text-transform: uppercase;
88
font-weight: bold;
99
}
1010

11-
.btn-primary {
11+
.btn-primary {
1212
border-radius: 5px;
1313
}
1414

15-
.btn-rounded {
16-
border-radius: 30px;
15+
.btn-rounded {
16+
border-radius: 60px;
1717
}
1818

19-
.btn-outlined {
19+
.btn-outlined {
2020
border-width: 3px;
2121
border-style: solid;
2222
transition: all 0.5s;
@@ -31,7 +31,7 @@
3131
background: $black !important;
3232
}
3333

34-
.black-btn {
34+
.black-btn {
3535
border-color: $black;
3636
color: $black;
3737

@@ -40,7 +40,7 @@
4040
}
4141
}
4242

43-
.green-btn {
43+
.green-btn {
4444
border-color: $green;
4545
color: $green;
4646

@@ -49,7 +49,7 @@
4949
}
5050
}
5151

52-
.orange-btn {
52+
.orange-btn {
5353
border-color: $orange-btn;
5454
color: $orange-btn;
5555

@@ -58,7 +58,7 @@
5858
}
5959
}
6060

61-
.purple-btn {
61+
.purple-btn {
6262
border-color: $purple-btn;
6363
color: $purple-btn;
6464

@@ -67,15 +67,23 @@
6767
}
6868
}
6969

70-
button:disabled {
70+
.btn-small {
71+
padding: 0.5rem 1rem;
72+
}
73+
74+
.btn-large {
75+
padding: 1.5rem 2rem;
76+
}
77+
78+
button:disabled {
7179
box-shadow: unset;
72-
opacity: .8;
80+
opacity: 0.8;
7381
background: $disabled;
7482
color: #fff;
7583
border: unset;
7684

77-
&:hover {
85+
&:hover {
7886
box-shadow: unset;
7987
background: $disabled;
8088
}
81-
}
89+
}

0 commit comments

Comments
 (0)