fix(button): use correct border-radius on menu & back button (#18501)

- adds hover and focused state to menu button

references #17624

core/src/components/back-button/back-button.ios.scss

@@ -6,7 +6,7 @@
 
 :host {
   --background-focused: #{ion-color(primary, base, .1)};
-  --border-radius: 10px;
+  --border-radius: 4px;
   --color: #{$back-button-ios-color};
   --icon-margin-end: -5px;
   --icon-margin-start: -4px;
@@ -32,7 +32,7 @@
 
 @media (any-hover: hover) {
   :host(:hover) {
-    --opacity: #{$button-ios-clear-opacity-hover};
+    --opacity: .6;
   }
 }
 

core/src/components/back-button/back-button.ios.vars.scss

@@ -1,9 +1,5 @@
 @import "../../themes/ionic.globals.ios";
 
-// TODO this is needed for the ios vars to import
-@import "../button/button.vars";
-@import "../button/button.ios.vars";
-
 // iOS Back Button
 // --------------------------------------------------
 

core/src/components/menu-button/menu-button.ios.scss

@@ -4,6 +4,8 @@
 // --------------------------------------------------
 
 :host {
+  --background-focused: #{ion-color(primary, base, .1)};
+  --border-radius: 4px;
   --color: #{ion-color(primary, base)};
   --padding-start: 5px;
   --padding-end: 5px;
@@ -12,9 +14,23 @@
 }
 
 :host(.activated) {
-  opacity: 0.4;
+  opacity: .4;
+}
+
+@media (any-hover: hover) {
+  :host(:hover) {
+    opacity: .6;
+  }
 }
 
 ion-icon {
   font-size: 31px;
 }
+
+
+// Menu Button Color: Focused
+// --------------------------------------------------
+
+:host(.ion-color.ion-focused) .button-native {
+  background: #{current-color(base, .1)};
+}