MathisBurger
diff --git a/‎.gitignore‎
Lines changed: 3 additions & 0 deletions b/‎.gitignore‎
Lines changed: 3 additions & 0 deletions
diff --git a/‎.media/btn-blue.PNG‎
2.59 KB b/‎.media/btn-blue.PNG‎
2.59 KB
diff --git a/‎.media/btn-default-shadow.PNG‎
2.71 KB b/‎.media/btn-default-shadow.PNG‎
2.71 KB
diff --git a/‎.media/btn-shadow-lg.PNG‎
5.42 KB b/‎.media/btn-shadow-lg.PNG‎
5.42 KB
diff --git a/‎README.md‎
Lines changed: 5 additions & 3 deletions b/‎README.md‎
Lines changed: 5 additions & 3 deletions
diff --git a/‎documentation/buttons.md‎
Lines changed: 58 additions & 0 deletions b/‎documentation/buttons.md‎
Lines changed: 58 additions & 0 deletions
diff --git a/‎index.html‎
Lines changed: 1 addition & 7 deletions b/‎index.html‎
Lines changed: 1 addition & 7 deletions
@@ -1,2 +1,5 @@
 main.css.map
 main.css
+chocolate.min.css
+chocolate.css
+index.html
@@ -16,19 +16,21 @@ ChocolateCSS is an lightweight scss libary, I build for use
 in my personal projects. I wanted to learn more about professional web design. Furthermore I my intention behind this project was, to get rid of css boilerplate code.<br>
 ChocolateCSS is not made for beginners. It is especially made for people, who want to design their web pages or apps very fast. But you need at least a bit of css experience.
 
+<strong>NOTE:</strong> This libary is made for the development of dark themes. It is quite hard to build light themes with it.
+
 # Installation
 
 ---
 Latest release: 
-<a href="">Download</a>
+<a href="https://github.com/MathisBurger/ChocolateCSS/releases/download/v1.0.0-beta/">Download</a>
 ```css
-@import url("https://github.com/MathisBurger/ChocolateCSS");
+@import url("https://github.com/MathisBurger/ChocolateCSS/releases/download/v1.0.0-beta/chocolate.min.css");
 ```
 
 # Documentation
 
 ---
-- Buttons
+- <a href="documentation/buttons.md">Buttons</a>
 - Flex
 - Nav
 - Scripts
@@ -0,0 +1,58 @@
+# Button documentation
+
+This part of the documentation will show you, how to use<br>
+the buttons of ChocolateCSS.
+
+### Buttons and colors
+
+To use buttons with ChocolateCSS is quite easy.
+
+```html
+<button class="btn-blue">Button Text</button>
+```
+
+The final result will look like this:
+<div align="center"><img src="../.media/btn-blue.PNG"></div>
+
+`btn-` is the base of the button classes. If you want to use other colors then blue, you need to change `blue` to another
+color. For example: `btn-red`.
+
+Supported colors:
+- blue
+- red
+- green
+- purple
+- pink
+
+### Button sizes
+
+Furthermore you can change the size of the different buttons with the extra size classes.
+```html
+<button class="btn-blue btn-lg">Button Text</button>
+```
+
+The extra class `btn-lg` will increase the size of the button.
+You can also use `btn-sm` to reduce the size.
+The default value of the button is `btn-md`.
+
+
+### Button shadows
+
+If the `box-shadow` if the button does not match your taste,
+you can also change it.
+
+```html
+<button class="btn-blue btn-shadow-lg">Button Text</button>
+```
+
+The extra class `btn-shadow-lg` increases the shadow.
+You can also use `btn-shadow-md` and `btn-shadow-sm`.
+Default value is `btn-shadow-sm`.
+
+<div align="center">
+    <img src="../.media/btn-default-shadow.PNG">
+    <img src="../.media/btn-shadow-lg.PNG">
+</div>
+
+The left button shows the default shadow. The right one contains the extra class `btn-shadow-lg`.
+
@@ -8,13 +8,7 @@
 
 <body style="background: #161616;">
 
-    <div class="container-lg">
-        <div class="row-lg">
-            <div style="width: 700px; background: blue; height: 3em;"></div>
-            <div style="width: 500px; background: red; height: 3em;"></div>
-            <div style="width: 300px; background: green; height: 3em;"></div>
-        </div>
-    </div>
+    <button class="btn-blue btn-shadow-lg">Button Text</button>
 
 </body>
 </html>