| HTML Class | Value | Description |
| btn-small-square |
width: 30px; height: 30px; font-size: 20px; cursor: pointer; border-radius: 10px; border: 1px solid; |
A small square button |
| btn-medium-square |
width: 60px; height: 60px; font-size: 50px; cursor: pointer; border-radius: 10px; border: 1px solid; |
A medium square button |
| btn-large-square |
width: 80px; height: 80px; font-size: 70px; cursor: pointer; border-radius: 10px; border: 1px solid; |
A large square button |
| btn-small |
width: 60px; height: 20px; font-size: 15px; cursor: pointer; border-radius: 10px; border: 1px solid; |
A small Button |
| btn-medium |
width: 90px; height: 25px; font-size: 15px; cursor: pointer; border-radius: 10px; border: 1px solid; |
A medium Button |
| btn-large |
width: 130px; height: 30px; font-size: 20px; cursor: pointer; border-radius: 10px; border: 1px solid; |
A large Button |
| btn-slide-right-red-medium |
width: 90px; height: 25px; font-size: 15px; cursor: pointer; border: none; border-radius: 1px; transition: 0.4s ease-in-out; box-shadow: 0 0 0 0 rgb(255, 0, 0) inset; |
A button with a red hover effect |
| btn-slide-right-green-medium |
width: 90px; height: 25px; font-size: 15px; cursor: pointer; border: none; border-radius: 1px; transition: 0.4s ease-in-out; box-shadow: 0 0 0 0 rgb(0, 255, 13) inset; |
A button with a green hover effect |
| btn-slide-right-blue-medium |
width: 90px; height: 25px; font-size: 15px; cursor: pointer; border: none; border-radius: 1px; transition: 0.4s ease-in-out; box-shadow: 0 0 0 0 rgb(76, 210, 255) inset; |
A button with a blue hover effect |
| btn-slide-right-black-medium |
width: 90px; height: 25px; font-size: 15px; cursor: pointer; border: none; border-radius: 1px; transition: 0.4s ease-in-out; box-shadow: 0 0 0 0 rgb(0, 0, 0) inset; |
A button with a black hover effect |
| btn-slide-right-white-medium |
width: 90px; height: 25px; font-size: 15px; cursor: pointer; border: none; border-radius: 1px; transition: 0.4s ease-in-out; box-shadow: 0 0 0 0 rgb(255, 255, 255) inset; |
A button with a white hover effect |
| btn-slide-right-orange-medium |
width: 90px; height: 25px; font-size: 15px; cursor: pointer; border: none; border-radius: 1px; transition: 0.4s ease-in-out; box-shadow: 0 0 0 0 orange inset; |
A button with a orange hover effect |
| btn-slide-right-red-large |
width: 140px; height: 50px; font-size: 20px; cursor: pointer; border: none; border-radius: 2px; transition: 0.4s ease-in-out; box-shadow: 0 0 0 0 rgb(255, 0, 0) inset; |
A large button with a red hover effect |
| btn-slide-right-green-large |
width: 140px; height: 50px; font-size: 20px; cursor: pointer; border: none; border-radius: 2px; transition: 0.4s ease-in-out; box-shadow: 0 0 0 0 rgb(0, 255, 13) inset; |
A large button with a green hover effect |
| btn-slide-right-blue-large |
width: 140px; height: 50px; font-size: 20px; cursor: pointer; border: none; border-radius: 2px; transition: 0.4s ease-in-out; box-shadow: 0 0 0 0 rgb(76, 210, 255) inset; |
A large button with a blue hover effect |
| btn-slide-right-black-large |
width: 140px; height: 50px; font-size: 20px; cursor: pointer; border: none; border-radius: 2px; transition: 0.4s ease-in-out; box-shadow: 0 0 0 0 rgb(0, 0, 0) inset; |
A large button with a black hover effect |
| btn-slide-right-white-large |
width: 140px; height: 50px; font-size: 20px; cursor: pointer; border: none; border-radius: 2px; transition: 0.4s ease-in-out; box-shadow: 0 0 0 0 rgb(255, 255, 255) inset; |
A large button with a white hover effect |
| btn-slide-right-orange-large |
width: 140px; height: 50px; font-size: 20px; cursor: pointer; border: none; border-radius: 2px; transition: 0.4s ease-in-out; box-shadow: 0 0 0 0 orange inset; |
A large button with a orange hover effect |