80 lines
1.6 KiB
SCSS
80 lines
1.6 KiB
SCSS
|
/* Base button styles */
|
||
|
|
.primary_Button,
|
||
|
|
.secondary_Button,
|
||
|
|
.tertiary_Button,
|
||
|
|
.disabled_Button,
|
||
|
|
.danger_Button {
|
||
|
|
border: none;
|
||
|
|
cursor: pointer;
|
||
|
|
padding: 8px 18px;
|
||
|
|
width: max-content;
|
||
|
|
border-radius: 6px;
|
||
|
|
font-size: 12px;
|
||
|
|
font-family: 'Poppins', sans-serif; // Ensure the font is applied
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
column-gap: 0.5rem; // Adjust column-gap for better spacing
|
||
|
|
transition: background-color 0.3s ease, transform 0.3s ease;
|
||
|
|
position: relative;
|
||
|
|
font-weight: 400;
|
||
|
|
letter-spacing: 0.2px;
|
||
|
|
text-transform: capitalize;
|
||
|
|
font-family: "GIlroy";
|
||
|
|
font-weight: 500;
|
||
|
|
letter-spacing: 0.3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Primary button styles */
|
||
|
|
.primary_Button {
|
||
|
|
background-color: #1C1C1C;
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.primary_Button:hover {
|
||
|
|
background-color: #000000;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Secondary button styles */
|
||
|
|
.secondary_Button {
|
||
|
|
background-color: #fff;
|
||
|
|
color: var(--secondayBTN-color);
|
||
|
|
border: 1px solid var(--secondayBTN-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.secondary_Button:hover {
|
||
|
|
background-color: #ffffffc5;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Tertiary button styles */
|
||
|
|
.tertiary_Button {
|
||
|
|
background-color: var(--dark-red-color);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tertiary_Button:hover {
|
||
|
|
background-color: #ce2929;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Disabled button styles */
|
||
|
|
.disabled_Button {
|
||
|
|
background-color: lightgray;
|
||
|
|
color: whitesmoke;
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
|
||
|
|
.disabled_Button:hover,
|
||
|
|
.disabled_Button:focus {
|
||
|
|
background-color: lightgray;
|
||
|
|
color: whitesmoke;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Danger button styles */
|
||
|
|
.danger_Button {
|
||
|
|
background-color: #F8CCCC80;
|
||
|
|
color: #e33333;
|
||
|
|
font-weight: 550;
|
||
|
|
}
|
||
|
|
|
||
|
|
.danger_Button:hover {
|
||
|
|
background-color: #f8ccccb7;
|
||
|
|
}
|