One moment, we're cooking some code examples

   
Header image

Buttons

Learn all about the styling of buttons

Todo

Todo

  • Buttons large mid en small toeveogen
  • een klein stukje dat we meestal button large gebruiken schrijven?
  • Custom buttons toevoegen (apart hoofdstuk?)

How to style buttons?

Learn how to style buttons. with using different fonts, colors and gradients and icons withe using css

Default buttons

default styling of the buttons

Large btn default btn Small btn Flat btn

HTML

<a class="waves-effect waves-light btn-large">Large btn</a>
<a class="waves-effect waves-light btn-small">Small btn</a>
<a class="waves-effect waves-light btn-flat">Flat btn</a>

HTML

<a href="#!" class="btn-floating btn-large waves-effect waves-light red CircledButton"><i class="fa-light fa-plus"></i>&lt/a>

CSS

a {
 background-color: #2bbbad;
 color: white;
}
Monkey Monkey

HTML

<a class="waves-effect waves-light btn-large"><i class="fa-solid fa-monkey"></i></a>
<a class="waves-effect waves-light btn-large"><i class="fa-solid fa-monkey"></i> Monkey</a>
<a class="waves-effect waves-light btn-large">Monkey <i class="fa-solid fa-monkey"></i></a>

button Rounded 5px button Rounded 10px button Rounded 20px

HTML

<a class="btn btn-warning RoundedButton">Rounded Button</a>

CSS

a {
 background-color: #2bbbad;
 color: white;
 border-radius: 12px;
}
button Colored Borders

HTML

<a class="waves-effect waves-light btn ButtonBorders">Colored Borders withe icoin</a>

CSS

a {
 background-color: white;
 color: black;
 border: 2px solid #2bbbad;
}
Button Filling

HTML

<a class="waves-effect waves-light btn">Button Filling </a>

CSS

a {
 background-color: white;
 color: black;
 border: 2px solid #2bbbad;
}
a:hover {
 background-color: #2bbbad;
 color: white;
}
button shadow hover

HTML

<a class="waves-effect waves-light btn ShadowHoverButton">shadow hover button</a>

CSS

a {
 background-color: #2bbbad;
 color: white;
 transition-duration: 0.4s;
} a:hover {  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
button disabled

HTML

<a class="btn disabled">Button</a>

CSS

custom buttons

Default button

Button

HTML

CSS

Button Border

Button

HTML

CSS