Button is a clickable element that initiates an action or event when pressed..
<button class="c-button">Button</button>
<a href="#" class="c-button" role="button">Link with button styling</a>
.c-button {
display: inline-flex;
align-items: center;
font-size: 16px;
font-weight: normal;
padding: 10px 20px;
border-radius: 30px;
border: none;
background-color: #33aef7;
color: #1a202c;
transition: all 0.2s ease;
cursor: pointer;
}
.c-button:hover {
background-color: #0999ee;
}
.c-button {
display: inline-flex;
align-items: center;
font-size: 16px;
font-weight: normal;
padding: 10px 20px;
border-radius: 30px;
border: none;
background-color: #33aef7;
color: #1A202C;
transition: all 0.2s ease;
cursor: pointer;
&:hover {
background-color: darken(#33aef7, 10%);
}
}