diff --git a/packages/ui-default/components/form/button.page.default.styl b/packages/ui-default/components/form/button.page.default.styl
index ce16e3ee1..ba1f1f731 100644
--- a/packages/ui-default/components/form/button.page.default.styl
+++ b/packages/ui-default/components/form/button.page.default.styl
@@ -1,44 +1,45 @@
 @import './var.inc.styl'
 
 .button
-  background-color: lighten($default-color, 50%)
-  border: 1px solid $default-color
-  transition: background-color .2s, box-shadow .5s
-  transition-timing-function: ease-out-sine
-
-  &, &:visited, &:hover
-    &, .typo &
-      color: $text-1-color
-
-  &:not(.disabled)
-    &:hover, &:focus
-      background-color: darken($default-color, 5%)
-      border-color: darken($default-color, 5%)
-      box-shadow: 0 4px 15px rgba(darken($default-color, 10%), 0.5)
-
-    &:focus
-      border-color: $input-focus-color
-
-  &.rounded
-    border-radius: rem($form-control-height / 2)
-
-  &.primary
-    border-color: $primary-color
-    background-color: $primary-color
+  &:not(.codicon)
+    background-color: lighten($default-color, 50%)
+    border: 1px solid $default-color
+    transition: background-color .2s, box-shadow .5s
+    transition-timing-function: ease-out-sine
 
     &, &:visited, &:hover
       &, .typo &
-        color: #FFF
+        color: $text-1-color
 
     &:not(.disabled)
-      &:hover
-        background-color: lighten(saturate($primary-color, 30%), 10%)
-        border-color: saturate($primary-color, 70%)
-        box-shadow: 0 4px 15px rgba(saturate($primary-color, 70%), 0.3)
+      &:hover, &:focus
+        background-color: darken($default-color, 5%)
+        border-color: darken($default-color, 5%)
+        box-shadow: 0 4px 15px rgba(darken($default-color, 10%), 0.5)
 
-  &.disabled
-    cursor: default
-    opacity: 0.5
+      &:focus
+        border-color: $input-focus-color
+
+    &.rounded
+      border-radius: rem($form-control-height / 2)
+
+    &.primary
+      border-color: $primary-color
+      background-color: $primary-color
+
+      &, &:visited, &:hover
+        &, .typo &
+          color: #FFF
+
+      &:not(.disabled)
+        &:hover
+          background-color: lighten(saturate($primary-color, 30%), 10%)
+          border-color: saturate($primary-color, 70%)
+          box-shadow: 0 4px 15px rgba(saturate($primary-color, 70%), 0.3)
+
+    &.disabled
+      cursor: default
+      opacity: 0.5
 
 .button.inverse
   line-height: rem($form-control-height - 4)
diff --git a/packages/ui-default/components/form/button.page.styl b/packages/ui-default/components/form/button.page.styl
index 38298c963..af6ddd822 100644
--- a/packages/ui-default/components/form/button.page.styl
+++ b/packages/ui-default/components/form/button.page.styl
@@ -1,29 +1,30 @@
 @import './var.inc.styl'
 
 .button
-  font-size: rem($font-size-secondary)
-  line-height: rem($form-control-height - 2)
-  height: rem($form-control-height)
-  padding: rem(0 25px)
-  display: inline-block
-  outline: 0
-  margin: 0 0 1rem
-  cursor: pointer
-  user-select: none
+  &:not(.codicon)
+    font-size: rem($font-size-secondary)
+    line-height: rem($form-control-height - 2)
+    height: rem($form-control-height)
+    padding: rem(0 25px)
+    display: inline-block
+    outline: 0
+    margin: 0 0 1rem
+    cursor: pointer
+    user-select: none
 
-  &:hover, &:focus
-    text-decoration: none
-  &.expanded
-    padding-left: 0
-    padding-right: 0
-    text-align: center
-    width: 100%
+    &:hover, &:focus
+      text-decoration: none
+    &.expanded
+      padding-left: 0
+      padding-right: 0
+      text-align: center
+      width: 100%
 
-  &.compact
-    margin-bottom: 0
-    height: rem($compact-control-height)
-    line-height: rem($compact-control-height - 2)
-    padding: rem(0 15px)
+    &.compact
+      margin-bottom: 0
+      height: rem($compact-control-height)
+      line-height: rem($compact-control-height - 2)
+      padding: rem(0 15px)
 
 .button.inverse
   line-height: rem($form-control-height - 4)