diff --git a/packages/canon/src/components/Button/styles.css b/packages/canon/src/components/Button/styles.css
index 9d24e6b452..52fcb57a18 100644
--- a/packages/canon/src/components/Button/styles.css
+++ b/packages/canon/src/components/Button/styles.css
@@ -27,57 +27,57 @@
   transition: all 150ms ease;
   cursor: pointer;
   border-radius: 8px;
+}
 
-  &.cn-button-primary {
-    background-color: var(--canon-accent);
-    color: var(--canon-text-primary-on-accent);
+.cn-button-primary {
+  background-color: var(--canon-accent);
+  color: var(--canon-text-primary-on-accent);
 
-    &:hover {
-      background-color: transparent;
-      box-shadow: inset 0 0 0 1px var(--canon-outline-focus);
-      color: var(--canon-text-primary);
-    }
-  }
-
-  &.cn-button-secondary {
+  &:hover {
     background-color: transparent;
-    box-shadow: inset 0 0 0 1px var(--canon-outline);
+    box-shadow: inset 0 0 0 1px var(--canon-outline-focus);
     color: var(--canon-text-primary);
-
-    &:hover {
-      box-shadow: inset 0 0 0 1px var(--canon-outline-hover);
-    }
-  }
-
-  &.cn-button-tertiary {
-    background-color: transparent;
-    color: var(--canon-text-primary);
-
-    &:hover {
-      color: var(--canon-text-secondary);
-    }
-  }
-
-  &.cn-button-small {
-    padding-left: 6px;
-    padding-right: 6px;
-    height: 32px;
-  }
-
-  &.cn-button-medium {
-    padding-left: 8px;
-    padding-right: 8px;
-    height: 40px;
-  }
-
-  & .cn-button-content {
-    display: flex;
-    align-items: center;
-    gap: var(--canon-spacing-xs);
-    font-weight: var(--canon-font-weight-bold);
-
-    &.cn-button-content-icon-both {
-      flex: 1;
-    }
   }
 }
+
+.cn-button-secondary {
+  background-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--canon-outline);
+  color: var(--canon-text-primary);
+
+  &:hover {
+    box-shadow: inset 0 0 0 1px var(--canon-outline-hover);
+  }
+}
+
+.cn-button-tertiary {
+  background-color: transparent;
+  color: var(--canon-text-primary);
+
+  &:hover {
+    color: var(--canon-text-secondary);
+  }
+}
+
+.cn-button-small {
+  padding-left: 6px;
+  padding-right: 6px;
+  height: 32px;
+}
+
+.cn-button-medium {
+  padding-left: 8px;
+  padding-right: 8px;
+  height: 40px;
+}
+
+.cn-button-content {
+  display: flex;
+  align-items: center;
+  gap: var(--canon-spacing-xs);
+  font-weight: var(--canon-font-weight-bold);
+}
+
+.cn-button-content-icon-both {
+  flex: 1;
+}