Skip to content

Buttons

AlexFlipnote edited this page Apr 23, 2021 · 1 revision

Modesta offers custom-made buttons that uses <a> directly for styling and not <button>.

<div class="buttons">
   <a class="btn" href="#">Nice link</a>
</div>

Buttons can be outside of the buttons class, but if you want them centered and aligned nicely by the framework, use the buttons class.

There are multiple classes you can add inside btn.

  • hover Makes the button hover upwards with a nice transform animation
  • hover-scale Makes the button scale towards the user when hovering over
  • hover-scale-inset Makes the button scale away from the user when hovering over
  • animation Makes the button play an animation when page loads for the first time
  • no-dark-hover Turns off the colour dimming when hovering over the button

Source: https://github.com/AlexFlipnote/Modesta/blob/master/scss/components/_buttons.scss

Clone this wiki locally