diff --git a/blocks/inspector-controls/range-control/style.scss b/blocks/inspector-controls/range-control/style.scss
index 8ad678ab9f147a..de5fc0e2bdb799 100644
--- a/blocks/inspector-controls/range-control/style.scss
+++ b/blocks/inspector-controls/range-control/style.scss
@@ -76,17 +76,17 @@
 
 	// webkit
 	&:focus::-webkit-slider-thumb {
-		box-shadow: $button-focus-style;;
+		@include button-style__focus-active;
 	}
 
 	// moz
 	&:focus::-moz-range-thumb {
-		box-shadow: $button-focus-style;;
+		@include button-style__focus-active;
 	}
 
 	// ie
 	&:focus::-ms-thumb {
-		box-shadow: $button-focus-style;;
+		@include button-style__focus-active;
 	}
 
 	/**
diff --git a/blocks/library/text-columns/editor.scss b/blocks/library/text-columns/editor.scss
index 82310e5d7cd665..7540d316dae5ed 100644
--- a/blocks/library/text-columns/editor.scss
+++ b/blocks/library/text-columns/editor.scss
@@ -1,5 +1,5 @@
 .wp-block-text-columns {
 	.blocks-editable__tinymce:focus {
-		box-shadow: $button-focus-style;
+		@include button-style__focus-active;
 	}
 }
diff --git a/components/autocomplete/style.scss b/components/autocomplete/style.scss
index 91bbbdaf72bf32..2928c7626881c1 100644
--- a/components/autocomplete/style.scss
+++ b/components/autocomplete/style.scss
@@ -15,7 +15,6 @@
 
 .components-autocomplete__result.components-button {
 	margin-bottom: 0;
-	border: 1px solid transparent;
 	font-family: $default-font;
 	font-size: $default-font-size;
 	color: $dark-gray-500;
@@ -28,12 +27,10 @@
 	text-align: left;
 
 	&.is-selected {
-		box-shadow: none;
-		color: $dark-gray-500;
-		border-color: $dark-gray-500;
+		@include button-style__focus-active;
 	}
 
 	&:hover {
-		color: $blue-medium-500;
+		@include button-style__hover;
 	}
 }
diff --git a/components/button/style.scss b/components/button/style.scss
index 09679e3b365291..eb986809e3a6a9 100644
--- a/components/button/style.scss
+++ b/components/button/style.scss
@@ -4,6 +4,7 @@
 	outline: none;
 	text-decoration: none;
 	margin: 0;
+	border-radius: 0;
 
 	&:active {
 		color: currentColor;
@@ -18,11 +19,6 @@
 	}
 
 	&:focus {
-		box-shadow: $button-focus-style;
-		outline: none;
-	}
-
-	&:active:focus {
-		box-shadow: none;
+		@include button-style__focus-active;
 	}
 }
diff --git a/components/dropdown-menu/style.scss b/components/dropdown-menu/style.scss
index 830703b5e6857d..941925d1286acc 100644
--- a/components/dropdown-menu/style.scss
+++ b/components/dropdown-menu/style.scss
@@ -54,25 +54,13 @@
 
 	.components-dropdown-menu__menu-item {
 		width: 100%;
-		margin-bottom: 3px;
 		padding: 6px;
-		background: none;
-		border: 1px solid transparent;
 		border-radius: 0;
 		outline: none;
-		color: $dark-gray-500;
 		cursor: pointer;
 
-		&:hover,
-		&:focus,
-		&:not(:disabled):hover {
-			box-shadow: none;
-			color: $dark-gray-500;
-			border-color: $dark-gray-500;
-		}
-
 		.dashicon {
-			margin-right: 5px;
+			margin-right: 8px;
 		}
 	}
 }
diff --git a/components/icon-button/style.scss b/components/icon-button/style.scss
index 02bc0e93b2b8d0..71b1f1f5851baf 100644
--- a/components/icon-button/style.scss
+++ b/components/icon-button/style.scss
@@ -20,6 +20,6 @@
 	}
 
 	&:not( :disabled ):hover {
-		color: $blue-medium-500;
+		@include button-style__hover;
 	}
 }
diff --git a/components/popover/style.scss b/components/popover/style.scss
index 367777135c2f5f..45089cc29fcef1 100644
--- a/components/popover/style.scss
+++ b/components/popover/style.scss
@@ -69,10 +69,6 @@
 	background: $white;
 	min-width: 240px;
 
-	&:focus {
-		box-shadow: $button-focus-style;
-	}
-
 	.components-popover.is-top & {
 		bottom: 100%;
 	}
diff --git a/components/toolbar/style.scss b/components/toolbar/style.scss
index ef801bd5348df4..0c5d96350e3bab 100644
--- a/components/toolbar/style.scss
+++ b/components/toolbar/style.scss
@@ -39,57 +39,23 @@ div.components-toolbar {
 	align-items: flex-end;
 	margin: 0;
 	padding: 3px;
-	background: none;
 	outline: none;
-	color: $dark-gray-500;
 	cursor: pointer;
 	position: relative;
 	width: $icon-button-size;
 	height: $icon-button-size;
 
-	&:hover,
-	/* the ":not(:disabled)" is needed to make it specific enough */
-	&:hover:not(:disabled),
-	&:focus {
-		color: $dark-gray-500;
-		outline: none;
-		box-shadow: none;
-	}
-
-	&.is-active,
-	&.is-active:hover {
-		color: $white;
-	}
-
 	&:disabled {
 		cursor: default;
 	}
 
-	&> svg {
-		border: 1px solid transparent;
-		padding: 4px;
+	& > svg {
+		padding: 5px;
 		box-sizing: content-box;
+		border-radius: $button-style__radius-roundrect;
 	}
 
-	&:hover > svg,
-	&:focus > svg {
-		color: $dark-gray-500;
-	}
-
-	&:not(:disabled) {
-		&.is-active > svg,
-		&:hover > svg,
-		&:focus > svg {
-			border: 1px solid $dark-gray-500;
-		}
-	}
-
-	&.is-active > svg,
-	&.is-active:hover > svg {
-		background-color: $dark-gray-500;
-		color: $white;
-	}
-
+	// subscript for numbered icon buttons, like headings
 	&[data-subscript] svg {
 		padding: 4px 8px 4px 0px;
 	}
@@ -103,6 +69,41 @@ div.components-toolbar {
 		right: 6px;
 		bottom: 8px;
 	}
+
+	// special hover style
+	&:not(:disabled) {
+		&.is-active > svg,
+		&:hover > svg {
+			box-shadow: inset 0 0 0 1px $dark-gray-500;
+		}
+	}
+	
+	// special active style
+	&.is-active > svg {
+		background: $dark-gray-500;
+		color: $white;
+	}
+
+	// focus style
+	&:focus {
+		outline: none;
+		box-shadow: none;
+		background: none;
+	}
+
+	&:focus > svg {
+		@include button-style__focus-active;
+	}
+	&:focus:hover > svg {
+		@include button-style__focus-active;
+	}
+
+	// active focus style
+	&.is-active:focus > svg {
+		background: $dark-gray-500;
+		color: $white;
+		box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white;
+	}
 }
 
 .components-toolbar__control .dashicon {
diff --git a/editor/assets/stylesheets/_mixins.scss b/editor/assets/stylesheets/_mixins.scss
index 89037256c3ce28..b44461324eeab3 100644
--- a/editor/assets/stylesheets/_mixins.scss
+++ b/editor/assets/stylesheets/_mixins.scss
@@ -110,3 +110,36 @@
 
 $visual-editor-max-width-padding: $visual-editor-max-width + $block-mover-padding-visible + $block-mover-padding-visible;
 $float-margin: calc( 50% - #{ $visual-editor-max-width-padding / 2 } );
+
+/**
+ * Button states and focus styles
+ */
+
+@mixin button-style__disabled {
+	opacity: 0.6;
+	cursor: default;
+}
+
+@mixin button-style__hover {
+	color: $dark-gray-900;	// previously $blue-medium-500
+}
+
+@mixin button-style__focus-active() {
+	outline: none;
+	box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white;
+	color: $dark-gray-900;
+	background: $light-gray-300;
+}
+
+@mixin tab-style__focus-active() {
+	outline: none;
+	box-shadow: 0 0 0 1px $dark-gray-500;
+	color: $dark-gray-900;
+	background: $light-gray-300;
+}
+
+@mixin input-style__focus-active() {
+	outline: none;
+	box-shadow: 0 0 0 1px $dark-gray-500;
+	color: $dark-gray-900;
+}
diff --git a/editor/assets/stylesheets/_variables.scss b/editor/assets/stylesheets/_variables.scss
index e625cb95d36b70..de66da7db1a329 100644
--- a/editor/assets/stylesheets/_variables.scss
+++ b/editor/assets/stylesheets/_variables.scss
@@ -32,7 +32,7 @@ $blue-medium-200: #BFE7F3;
 $blue-medium-100: #E5F5FA;
 $blue-medium-highlight: #b3e7fe;
 
-// Alerts
+/* Alerts */
 $alert-yellow: #f0b849;
 $alert-red: #d94f4f;
 $alert-green: #4ab866;
@@ -62,7 +62,6 @@ $admin-sidebar-width-collapsed: 36px;
 $shadow-popover: 0px 3px 20px rgba( $dark-gray-900, .1 ), 0px 1px 3px rgba( $dark-gray-900, .1 );
 $shadow-toolbar: 0px 2px 10px rgba( $dark-gray-900, .1 ), 0px 0px 2px rgba( $dark-gray-900, .1 );
 $text-editor-max-width: 760px;
-$button-focus-style: 0 0 0 1px $blue-medium-400, 0 0 2px 1px $blue-medium-400;
 
 /* Editor */
 $text-editor-max-width: 760px;
@@ -77,6 +76,10 @@ $block-mover-padding-hidden: 10px;
 $block-mover-padding-visible: 32px;
 $block-spacing: 4px;
 
+/* Button styles */
+$button-style__radius-roundrect: 4px;
+$button-style__radius-round: 50%;
+
 /* Media Queries */
 
 /* All media queries currently in WordPress:
diff --git a/editor/block-switcher/style.scss b/editor/block-switcher/style.scss
index 75ced12d0c61cd..0e7d3ade1cb775 100644
--- a/editor/block-switcher/style.scss
+++ b/editor/block-switcher/style.scss
@@ -34,25 +34,15 @@
 }
 
 .editor-block-switcher__menu-item {
+	color: $dark-gray-500;
+	display: flex;
+	align-items: center;
 	width: 100%;
-	margin-bottom: 3px;
 	padding: 6px;
-	background: none;
-	border: 1px solid transparent;
-	outline: none;
-	border-radius: 0;
-	color: $dark-gray-500;
-	cursor: pointer;
+	text-align: left;
 
-	&:hover,
-	&:focus,
-	&:not(:disabled):hover {
-		box-shadow: none;
-		color: $dark-gray-500;
-		border-color: $dark-gray-500;
+	.editor-block-switcher__block-icon {
+		margin-right: 8px;
+		height: 20px;
 	}
 }
-
-.editor-block-switcher__block-icon {
-	margin-right: 5px;
-}
diff --git a/editor/block-toolbar/style.scss b/editor/block-toolbar/style.scss
index a94545bf99ea0a..fa23aeb6fbfaad 100644
--- a/editor/block-toolbar/style.scss
+++ b/editor/block-toolbar/style.scss
@@ -17,6 +17,7 @@
 
 .editor-block-toolbar .editor-block-switcher {
 	display: inline-flex;
+	border-left: 1px solid $light-gray-500;
 }
 
 .editor-block-toolbar__mobile-tools {
diff --git a/editor/components/document-outline/style.scss b/editor/components/document-outline/style.scss
index 590d8b42fce9b6..f594c98babe4d6 100644
--- a/editor/components/document-outline/style.scss
+++ b/editor/components/document-outline/style.scss
@@ -42,8 +42,7 @@
 	text-align: left;
 
 	&:focus {
-		box-shadow: $button-focus-style;
-		outline: none;
+		@include button-style__focus-active;
 	}
 }
 
diff --git a/editor/components/inserter/style.scss b/editor/components/inserter/style.scss
index bbe3bf1210da21..c2a604e590539a 100644
--- a/editor/components/inserter/style.scss
+++ b/editor/components/inserter/style.scss
@@ -23,12 +23,7 @@
 	transition: color .2s ease;
 
 	.editor-layout__content & {
-		border-radius: $icon-button-size / 2;
-	}
-
-	&:hover,
-	&:focus {
-		color: $blue-medium-500;
+		border-radius: $button-style__radius-round;
 	}
 }
 
@@ -41,10 +36,6 @@
 
 	overflow: auto;
 	box-shadow: inset 0 -5px 5px -4px rgba( $dark-gray-900, .1 );
-
-	&:focus {
-		outline: none;
-	}
 }
 
 input[type="search"].editor-inserter__search {
@@ -52,16 +43,15 @@ input[type="search"].editor-inserter__search {
 	width: 100%;
 	margin: 0;
 	box-shadow: none;
-	border: 1px solid transparent;
 	padding: 8px 11px;
 	font-size: $default-font-size;
 	position: relative;
 	z-index: 1;
-	border-bottom: 1px solid $light-gray-500;
+	border: none;
+	box-shadow: 0 1px 0 0 $light-gray-500;
 
 	&:focus {
-		outline: none;
-		box-shadow: $button-focus-style;
+		@include input-style__focus-active;
 	}
 }
 
@@ -99,7 +89,7 @@ input[type="search"].editor-inserter__search {
 	display: flex;
 	flex-direction: column;
 	width: calc( 50% - 16px );
-	border-radius: 4px;
+	border-radius: $button-style__radius-roundrect;
 	font-size: $default-font-size;
 	color: $dark-gray-500;
 	margin: 8px;
@@ -109,26 +99,20 @@ input[type="search"].editor-inserter__search {
 	border: none;
 	line-height: 20px;
 	background: transparent;
-	border: 1px solid transparent;
 
 	&:disabled {
-		opacity: 0.6;
-		cursor: default;
+		@include button-style__disabled;
 	}
 
 	&:not(:disabled) {
 		&:hover {
-			color: $blue-medium-500;
+			@include button-style__hover;
 		}
 
 		&:focus,
 		&:active,
 		&.is-active {
-			outline: none;
-			border: 1px solid $dark-gray-500;
-			box-shadow: inset 0 0 0 1px $white;
-			color: $dark-gray-900;
-			background: $light-gray-300;
+			@include button-style__focus-active;
 			position: relative;
 		}
 	}
@@ -163,6 +147,7 @@ input[type="search"].editor-inserter__search {
 	font-size: $default-font;
 	padding: 8px 8px;
 	width: 100%;
+	border-radius: 0;
 	margin: 0;
 	color: $dark-gray-500;
 	cursor: pointer;
@@ -177,7 +162,6 @@ input[type="search"].editor-inserter__search {
 	&:active,
 	&:focus {
 		z-index: z-index( '.editor-inserter__tab.is-active' );
-		box-shadow: $button-focus-style;
-		outline: none;
+		@include tab-style__focus-active;
 	}
 }
diff --git a/editor/header/style.scss b/editor/header/style.scss
index aadf597a279402..19893e114d29d1 100644
--- a/editor/header/style.scss
+++ b/editor/header/style.scss
@@ -78,8 +78,9 @@
 }
 
 .editor-header .components-button {
-	border-radius: 3px;
+	border-radius: $button-style__radius-roundrect;
 
+	// header toggle buttons
 	&.is-toggled {
 		color: $white;
 	}
@@ -87,7 +88,7 @@
 	// put the gray background on a separate layer, so as to match the size of the publish button (34px)
 	&.is-toggled::before {
 		content: "";
-		border-radius: 3px;
+		border-radius: $button-style__radius-roundrect;
 		position: absolute;
 		z-index: -1;
 		background: $dark-gray-500;
@@ -97,6 +98,13 @@
 		left: 1px;
 	}
 
+	&.is-toggled:focus {
+		outline: none;
+		box-shadow: 0 0 0 1px $dark-gray-500, inset 0 0 0 1px $white;
+		color: $white;
+		background: $dark-gray-500;
+	}
+
 	@include break-medium() {
 		&.editor-post-publish-button, &.editor-publish-with-dropdown__button {
 			height: 33px;
diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss
index 8e826acfd0d17d..29d6de04bbb28e 100644
--- a/editor/modes/visual-editor/style.scss
+++ b/editor/modes/visual-editor/style.scss
@@ -322,7 +322,7 @@
 	}
 
 	.editor-inserter__toggle.components-icon-button:not(:disabled):hover {
-		color: $blue-medium-500;
+		@include button-style__hover;
 	}
 }
 
@@ -519,7 +519,11 @@
 	.editor-inserter__toggle.components-button {
 		margin: 0;
 		padding: 4px;
-		background-color: white;
+		background: $white;
+
+		&:focus {
+			background: $light-gray-300;
+		}
 
 		.dashicon {
 			vertical-align: bottom;
@@ -542,11 +546,16 @@ $sticky-bottom-offset: 20px;
 
 	.editor-block-toolbar {
 		border: 1px solid $light-gray-500;
-		width: 100%;;
-		.components-toolbar:first-child {
+		width: 100%;
+
+		// remove stacked borders in inline toolbar
+		> div:first-child {
 			margin-left: -1px;
 		}
 
+		> .editor-block-switcher:first-child {
+			margin-left: -2px;
+		}
 
 		@include break-small() {
 			width: auto;
@@ -571,5 +580,5 @@ $sticky-bottom-offset: 20px;
 .editor-block-contextual-toolbar + div {
 	// prevent collapsing margins between block and toolbar, matches the 20px bottom offset		 +		display: flex;
 	margin-top: - $sticky-bottom-offset - 1px;
-	padding-top: 1px;
+	padding-top: 2px;
 }
diff --git a/editor/sidebar/style.scss b/editor/sidebar/style.scss
index e775ddd6cbb511..44c0ac2c009ea9 100644
--- a/editor/sidebar/style.scss
+++ b/editor/sidebar/style.scss
@@ -119,6 +119,7 @@
 	background: transparent;
 	border: none;
 	border-bottom: 3px solid transparent;
+	border-radius: 0;
 	cursor: pointer;
 	height: 50px;
 	line-height: 50px;
@@ -132,7 +133,6 @@
 	}
 
 	&:focus {
-		box-shadow: $button-focus-style;
-		outline: none;
+		@include button-style__focus-active;
 	}
 }