diff --git a/src/components/ButtonComponent/Button.sass b/src/components/ButtonComponent/Button.sass index a0bdef1..0e01f21 100644 --- a/src/components/ButtonComponent/Button.sass +++ b/src/components/ButtonComponent/Button.sass @@ -1,14 +1,22 @@ @use '/src/styles/variables.sass' as vars +@use 'sass:color' .button - background-color: #5e825f + background: vars.$primaryColor border: none - border-radius: 4px + border-radius: 16px color: white - padding: 1rem 2rem + padding: 0.5rem 1.25rem text-align: center text-decoration: none display: inline-block - font-size: 16px - margin: 4px 2px + font-size: 0.75rem + font-weight: 700 cursor: pointer + transition: all 0.2s ease-out + + &:hover + background: color.adjust(vars.$primaryColor, $blackness: 20%) + + &:active + transform: scale(0.95)