diff --git a/pattern/component/button/ghost.php b/pattern/component/button/ghost.php
new file mode 100644
index 00000000..dd290d29
--- /dev/null
+++ b/pattern/component/button/ghost.php
@@ -0,0 +1,2 @@
+<a href="#" class="btn btn--ghost">Ghost Button</a>
+<button type="button" class="btn btn--ghost">Ghost Button</button>
diff --git a/pattern/component/button/variation.php b/pattern/component/button/variation.php
new file mode 100644
index 00000000..7101a5b2
--- /dev/null
+++ b/pattern/component/button/variation.php
@@ -0,0 +1,20 @@
+<?php
+    $minus = array(
+        'btn',
+        'btn--text',
+        'btn--block',
+        'btn--sm',
+        'btn--lg',
+        'btn--ghost',
+        'btn--disabled'
+    );
+    $classes = Helper::parseCss('btn--');
+    $classes = array_diff($classes, $minus);
+
+?>
+<?php foreach($classes as $class) : ?>
+    <p><a href="#" class="btn <?php echo $class; ?>"> <?php echo $class; ?> Button</a>
+    <button type="button" class="btn <?php echo $class; ?>"> <?php echo $class; ?> Button</button></p>
+    <p><a href="#" class="btn btn--ghost <?php echo $class; ?>"> <?php echo $class; ?> Ghost Button</a>
+    <button type="button" class="btn btn--ghost <?php echo $class; ?>"> <?php echo $class; ?> Ghost Button</button></p>
+<?php endforeach; ?>
diff --git a/pattern/component/button/variations.php b/pattern/component/button/variations.php
deleted file mode 100644
index 7c87f96a..00000000
--- a/pattern/component/button/variations.php
+++ /dev/null
@@ -1,2 +0,0 @@
-<a href="#" class="btn btn--primary">Button</a>
-<button type="button" class="btn btn--primary">Button</button>