diff --git a/build/less/themes/packages/classic/elements/button.overrides b/build/less/themes/packages/classic/elements/button.overrides
new file mode 100644
index 000000000..c5c53367f
--- /dev/null
+++ b/build/less/themes/packages/classic/elements/button.overrides
@@ -0,0 +1,3 @@
+/*******************************
+           Overrides
+*******************************/
diff --git a/build/less/themes/packages/classic/elements/button.variables b/build/less/themes/packages/classic/elements/button.variables
new file mode 100644
index 000000000..ded0bdb3e
--- /dev/null
+++ b/build/less/themes/packages/classic/elements/button.variables
@@ -0,0 +1,96 @@
+/*******************************
+            Button
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+/* Shadow */
+@shadowDistance: 0em;
+@shadowOffset: (@shadowDistance / 2);
+@shadowBoxShadow: 0px -@shadowDistance 0px 0px @borderColor inset;
+@backgroundColor: #FAFAFA;
+@backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.09));
+@boxShadow:
+  0px 0px 0px 1px @borderColor inset,
+  @shadowBoxShadow
+;
+
+/* Padding */
+@verticalPadding: 0.8em;
+@horizontalPadding: 1.5em;
+
+
+/*-------------------
+        Group
+--------------------*/
+
+@groupBoxShadow: none;
+@groupButtonBoxShadow:
+  0px 0px 0px 1px @borderColor inset,
+  @shadowBoxShadow
+;
+@verticalBoxShadow: 0px 0px 0px 1px @borderColor inset;
+@groupButtonOffset: 0px 0px 0px -1px;
+@verticalGroupOffset: 0px 0px -1px 0px;
+
+/*-------------------
+        States
+--------------------*/
+
+/* Hovered */
+@hoverBackgroundColor: '';
+@hoverBackgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.13));
+@hoverBoxShadow: '';
+@hoverColor: @hoveredTextColor;
+@iconHoverOpacity: 0.85;
+
+/* Focused */
+@focusBackgroundColor: '';
+@focusBackgroundImage: '';
+@focusBoxShadow:
+  0px 0px 1px rgba(81, 167, 232, 0.8) inset,
+  0px 0px 3px 2px rgba(81, 167, 232, 0.8)
+;
+@focusColor: @hoveredTextColor;
+@iconFocusOpacity: 0.85;
+
+/* Pressed Down */
+@downBackgroundColor: #F1F1F1;
+@downBackgroundImage: '';
+@downBoxShadow:
+  0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset,
+  0px 1px 4px 0px rgba(0, 0, 0, 0.1) inset !important
+;
+@downColor: @pressedTextColor;
+
+/* Active */
+@activeBackgroundColor: #DADADA;
+@activeBackgroundImage: none;
+@activeColor: @selectedTextColor;
+@activeBoxShadow:
+  0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset,
+  0px 1px 4px 0px rgba(0, 0, 0, 0.1) inset !important
+;
+
+/* Active + Hovered */
+@activeHoverBackgroundColor: #DADADA;
+@activeHoverBackgroundImage: none;
+@activeHoverBoxShadow:
+  0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset,
+  0px 1px 4px 0px rgba(0, 0, 0, 0.1) inset !important
+;
+@activeHoverColor: @selectedTextColor;
+
+/* Loading */
+@loadingBackgroundColor: #FFFFFF;
+
+/*-------------------
+        Types
+--------------------*/
+
+/* Labeled Icon */
+@labeledIconBackgroundColor: rgba(0, 0, 0, 0.05);
+@labeledIconLeftShadow: -1px 0px 0px 0px @labeledIconBorder inset;
+@labeledIconRightShadow: 1px 0px 0px 0px @labeledIconBorder inset;
diff --git a/build/less/themes/packages/raised/elements/button.overrides b/build/less/themes/packages/raised/elements/button.overrides
new file mode 100644
index 000000000..c5c53367f
--- /dev/null
+++ b/build/less/themes/packages/raised/elements/button.overrides
@@ -0,0 +1,3 @@
+/*******************************
+           Overrides
+*******************************/
diff --git a/build/less/themes/packages/raised/elements/button.variables b/build/less/themes/packages/raised/elements/button.variables
new file mode 100644
index 000000000..ec7b9ed71
--- /dev/null
+++ b/build/less/themes/packages/raised/elements/button.variables
@@ -0,0 +1,12 @@
+/*******************************
+            Button
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+/* Shadow */
+@shadowDistance: 0.2em;
+@shadowOffset: (@shadowDistance / 2);
+@shadowBoxShadow: 0px -@shadowDistance 0px 0px @borderColor inset;
\ No newline at end of file
diff --git a/build/less/themes/packages/round/elements/button.overrides b/build/less/themes/packages/round/elements/button.overrides
new file mode 100644
index 000000000..e69de29bb
diff --git a/build/less/themes/packages/round/elements/button.variables b/build/less/themes/packages/round/elements/button.variables
new file mode 100644
index 000000000..d078106e1
--- /dev/null
+++ b/build/less/themes/packages/round/elements/button.variables
@@ -0,0 +1,143 @@
+/*******************************
+            Button
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+@borderRadius: @circularRadius;
+@textTransform: uppercase;
+@backgroundColor: #FFFFFF;
+@backgroundImage: none;
+@fontWeight: bold;
+@textColor: rgba(0, 0, 0, 0.6);
+@boxShadow:
+  0px 0px 0px 2px rgba(0, 0, 0, 0.2) inset
+;
+
+/* Padding */
+@verticalPadding: 1.25em;
+@horizontalPadding: 3em;
+
+/* Icon */
+@iconOpacity: 0.8;
+@iconDistance: 0.4em;
+@iconTransition: opacity @transitionDuration @transitionEasing;
+@iconMargin: 0em @iconDistance 0em -(@iconDistance / 2);
+@iconVerticalAlign: top;
+
+/* Loader */
+@loaderPath: "@{imagePath}/loader-mini.gif";
+@hugeLoaderPath: "@{imagePath}/loader-small.gif";
+@massiveLoaderPath: "@{imagePath}/loader-medium.gif";
+
+/*-------------------
+        Group
+--------------------*/
+
+@verticalBoxShadow: 0px 0px 0px 1px @borderColor inset;
+
+
+/*-------------------
+        States
+--------------------*/
+
+@hoverBackgroundColor: #FAFAFA;
+@hoverBackgroundImage: none;
+@hoverBoxShadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.3) inset;
+
+@downBackgroundColor: #F0F0F0;
+@downBackgroundImage: none;
+@downBoxShadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.35) inset !important;
+
+@activeBackgroundColor: #DDDDDD;
+@activeBackgroundImage: none;
+@activeBoxShadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.3) inset !important;
+
+@loadingBackgroundColor: #FFFFFF;
+
+/*-------------------
+        Types
+--------------------*/
+
+/* Labeled Icon */
+@labeledIconWidth: 1em + (@verticalPadding * 2);
+@labeledIconBackgroundColor: transparent;
+@labeledIconPadding: (@horizontalPadding + 1em);
+@labeledIconBorder: rgba(0, 0, 0, 0.05);
+@labeledIconColor: '';
+
+@labeledIconLeftShadow: none;
+@labeledIconRightShadow: none;
+
+/* Basic */
+@basicBoxShadow: 0px 0px 0px 1px @borderColor;
+@iconOffset: 0.05em;
+@basicLoadingColor: #FFFFFF;
+
+@basicHoverBackground: #FAFAFA;
+@basicHoverBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15);
+
+@basicDownBackground: rgba(0, 0, 0, 0.02);
+@basicDownBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+
+@basicActiveBackground: @transparentBlack;
+@basicActiveColor: @selectedTextColor;
+
+/* Basic Inverted */
+@basicInvertedBackground: transparent;
+@basicInvertedHoverBackground: transparent;
+@basicInvertedDownBackground: @transparentWhite;
+@basicInvertedActiveBackground: @transparentWhite;
+
+@basicInvertedBoxShadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5);
+@basicInvertedHoverBoxShadow: 0px 0px 0px 2px @selectedWhiteBorderColor;
+@basicInvertedDownBoxShadow: 0px 0px 0px 2px @selectedWhiteBorderColor;
+@basicInvertedActiveBoxShadow: 0px 0px 0px 2px @selectedWhiteBorderColor;
+
+@basicInvertedColor: @darkWhite;
+@basicInvertedHoverColor: @darkWhiteHover;
+@basicInvertedDownColor: @darkWhiteActive;
+@basicInvertedActiveColor: @invertedTextColor;
+
+
+/* Basic Group */
+@basicGroupBorder: 1px solid @borderColor;
+@basicGroupBoxShadow: 0px 0px 0px 1px @borderColor;
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Colors */
+@coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
+@coloredBoxShadow: @shadowBoxShadow;
+
+/* Compact */
+@compactVerticalPadding: (@verticalPadding * 0.75);
+@compactHorizontalPadding: (@horizontalPadding * 0.75);
+
+/* Attached */
+@attachedOffset: -1px;
+@attachedBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+@attachedHorizontalPadding: 0.75em;
+
+/* Floated */
+@floatedMargin: 0.25em;
+
+/* Animated */
+@animationDuration: 0.3s;
+@animationEasing: ease;
+@fadeScaleHigh: 1.5;
+@fadeScaleLow: 0.75;
+
+/* Sizing */
+@mini: 0.7rem;
+@tiny: 0.8rem;
+@small: 0.875rem;
+@medium: 1rem;
+@large: 1.125rem;
+@big: 1.25rem;
+@huge: 1.375rem;
+@massive: 1.5rem;
+
diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css
index 819f6ccdb..9c27c8024 100755
--- a/server/files/stylesheets/semantic.css
+++ b/server/files/stylesheets/semantic.css
@@ -884,6 +884,9 @@ body#example.hide {
 #example .existing.code {
   display: none;
 }
+#example .another.example .annotation {
+  margin: 2em 0em 0em;
+}
 
 
 #example .transition.example .ui.button {
@@ -918,7 +921,7 @@ body#example.hide {
   position: absolute;
   top: 1rem;
   left: 1rem;
-  background-color: #E0E0E0;
+  background-color: #F0F0F0;
   content: '';
   width: calc(100% - 2rem);
   height: calc(100% - 2rem);