File tree Expand file tree Collapse file tree 4 files changed +500
-422
lines changed Expand file tree Collapse file tree 4 files changed +500
-422
lines changed Original file line number Diff line number Diff line change @@ -71,6 +71,27 @@ <h3 class="title">Disabled buttons</h3>
71
71
< button href ="# " class ="btn btn-rounded " disabled > btn-rounded</ button >
72
72
< button href ="# " class ="btn btn-rounded btn-outlined " disabled > btn-outlined</ button >
73
73
</ 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 >
74
95
</ div >
75
96
< div class ="container ">
76
97
< h3 class ="title "> Forms</ h3 >
Original file line number Diff line number Diff line change 1
1
@import " colors" ;
2
2
3
- .btn {
3
+ .btn {
4
4
padding : 1rem 1.5rem ;
5
5
color : #fff ;
6
6
cursor : pointer ;
7
7
text-transform : uppercase ;
8
8
font-weight : bold ;
9
9
}
10
10
11
- .btn-primary {
11
+ .btn-primary {
12
12
border-radius : 5px ;
13
13
}
14
14
15
- .btn-rounded {
16
- border-radius : 30 px ;
15
+ .btn-rounded {
16
+ border-radius : 60 px ;
17
17
}
18
18
19
- .btn-outlined {
19
+ .btn-outlined {
20
20
border-width : 3px ;
21
21
border-style : solid ;
22
22
transition : all 0.5s ;
31
31
background : $black !important ;
32
32
}
33
33
34
- .black-btn {
34
+ .black-btn {
35
35
border-color : $black ;
36
36
color : $black ;
37
37
40
40
}
41
41
}
42
42
43
- .green-btn {
43
+ .green-btn {
44
44
border-color : $green ;
45
45
color : $green ;
46
46
49
49
}
50
50
}
51
51
52
- .orange-btn {
52
+ .orange-btn {
53
53
border-color : $orange-btn ;
54
54
color : $orange-btn ;
55
55
58
58
}
59
59
}
60
60
61
- .purple-btn {
61
+ .purple-btn {
62
62
border-color : $purple-btn ;
63
63
color : $purple-btn ;
64
64
67
67
}
68
68
}
69
69
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 {
71
79
box-shadow : unset ;
72
- opacity : .8 ;
80
+ opacity : 0 .8 ;
73
81
background : $disabled ;
74
82
color : #fff ;
75
83
border : unset ;
76
84
77
- & :hover {
85
+ & :hover {
78
86
box-shadow : unset ;
79
87
background : $disabled ;
80
88
}
81
- }
89
+ }
You can’t perform that action at this time.
0 commit comments