Let's have fun
Let's have fun
Buttons
Info
This framework contains 6 types of buttons and a dropdown button. Except for the icon button, you can use the classes in the following tags:
<a></a><button></button><input type="button"><input type="submit"><input type="reset">
The icon button cannot be used in the <input> tag.
The buttons
button
<a class="button" href="">A-Button</a> <button class="button">Button</button> <input type="submit" class="button" value="Input">
Open buttons
button outline
<a class="button outline" href="">A-Button</a> <button class="button outline">Button</button> <input type="submit" class="button outline" value="Input">
Curved buttons
button curved
<a class="button curved" href="">A-Button</a> <button class="button curved">Button</button> <input type="submit" class="button curved" value="Input">
Open curved buttons
button curved outline
<a class="button curved outline" href="">A-Button</a> <button class="button curved outline">Button</button> <input type="submit" class="button curved outline" value="Input">
Icon buttons and open icon buttons
button icons
button icons outline
<a class="button icons" href=""><i class="icon icon-home"></i></a> <button class="button icons outline"><i class="icon icon-home"></i></button>
Dropdown button
dropdown
has-child
button
dropdown-content
Als menu
<div class="dropdown">
<button class="has-child button">Dropdown</button>
<div class="dropdown-content">
<a href="">Link</a>
<a href="">Link</a>
</div>
</div>
With text
<div class="dropdown">
<button class="has-child button">Dropdown</button>
<div class="dropdown-content">
<p class="text-sm padding">Tekst</p>
</div>
</div>
With image
<div class="dropdown">
<button class="has-child button">Dropdown</button>
<div class="dropdown-content">
>img alt="foto" class="image" src=""/>
</div>
</div>
Page to the top
There is also a button to scroll your page back to the top. (If all goes well you will now see the button at the bottom right)
<button class="button-to-top"></button>
<!DOCTYPE html>
<html lang="nl" class="bg-blue">
<head>
<meta charset="utf-8">
<title>Button to top</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="favicon.png" sizes="32x32"/>
<link rel="stylesheet" href=""/>
</head>
<body>
<button class="button-to-top"></button>
<script src=""></script>
</body>
</html>Colors
Black
button-black
<button class="button button-black"><i class="icon icon-home"></i></button> <div class="dropdown button-black"></div>
White
button-white
<button class="button button-white"><i class="icon icon-home"></i></button> <div class="dropdown button-white"></div>
Gray
button-gray
<button class="button button-gray"><i class="icon icon-home"></i></button> <div class="dropdown button-gray"></div>
Blue
button-blue
<button class="button button-blue"><i class="icon icon-home"></i></button> <div class="dropdown button-blue"></div>
Green
button-green
<button class="button button-green"><i class="icon icon-home"></i></button> <div class="dropdown button-green"></div>
Teal
button-teal
<button class="button button-teal"><i class="icon icon-home"></i></button> <div class="dropdown button-teal"></div>
Red
button-red
<button class="button button-red"><i class="icon icon-home"></i></button> <div class="dropdown button-red"></div>
Yellow
button-yellow
<button class="button button-yellow"><i class="icon icon-home"></i></button> <div class="dropdown button-yellow"></div>
Orange
button-orange
<button class="button button-orange"><i class="icon icon-home"></i></button> <div class="dropdown button-orange"></div>
Brown
button-brown
<button class="button button-brown"><i class="icon icon-home"></i></button> <div class="dropdown button-brown"></div>
Purple
button-purple
<button class="button button-purple"><i class="icon icon-home"></i></button> <div class="dropdown button-purple"></div>
Pink
button-pink
<button class="button button-pink"><i class="icon icon-home"></i></button> <div class="dropdown button-pink"></div>