diff --git a/packages/main/src/Button.hbs b/packages/main/src/Button.hbs
index 028bf80af547..0970798133c0 100644
--- a/packages/main/src/Button.hbs
+++ b/packages/main/src/Button.hbs
@@ -1,23 +1,24 @@
 <button
 		type="button"
-		class="{{classes.main}}"
+		class="ui5-button-inner"
 		?disabled="{{disabled}}"
 		data-sap-focus-ref
 		{{> ariaPressed}}
 		dir="{{rtl}}"
 		@focusout={{_onfocusout}}
+		@focusin={{_onfocusin}}
 		@click={{_onclick}}
 		@mousedown={{_onmousedown}}
 	>
 		{{#if icon}}
 			<ui5-icon
-				class="{{classes.icon}}"
+				class="ui5-button-icon"
 				src="{{icon}}"
 			></ui5-icon>
 		{{/if}}
 
 		{{#if textContent}}
-			<span id="{{_id}}-content" class="{{classes.text}}">
+			<span id="{{_id}}-content" class="ui5-button-text">
 				<bdi>
 					<slot></slot>
 				</bdi>
diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js
index 0ae73b320bb6..320f9cd0a4c1 100644
--- a/packages/main/src/Button.js
+++ b/packages/main/src/Button.js
@@ -1,7 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
-import { getCompactSize } from "@ui5/webcomponents-base/dist/config/CompactSize.js";
 import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { fetchResourceBundle, getResourceBundle } from "@ui5/webcomponents-base/dist/ResourceBundle.js";
@@ -96,8 +95,33 @@ const metadata = {
 
 		/**
 		 * Used to switch the active state (pressed or not) of the <code>ui5-button</code>.
+		 * @private
 		 */
-		_active: {
+		active: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines if a content has been added to the default slot
+		 * @private
+		 */
+		iconOnly: {
+			type: Boolean,
+		},
+
+		/**
+		 * Indicates if the elements is on focus
+		 * @private
+		 */
+		focused: {
+			type: Boolean,
+		},
+
+		/**
+		 * Indicates if the elements has a slotted icon
+		 * @private
+		 */
+		hasIcon: {
 			type: Boolean,
 		},
 
@@ -189,8 +213,8 @@ class Button extends UI5Element {
 		super();
 
 		this._deactivate = () => {
-			if (this._active) {
-				this._active = false;
+			if (this.active) {
+				this.active = false;
 			}
 		};
 
@@ -202,6 +226,9 @@ class Button extends UI5Element {
 		if (this.submits && !FormSupport) {
 			console.warn(`In order for the "submits" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
 		}
+
+		this.iconOnly = !this.childNodes.length;
+		this.hasIcon = !!this.icon;
 	}
 
 	onEnterDOM() {
@@ -223,7 +250,7 @@ class Button extends UI5Element {
 
 	_onmousedown(event) {
 		event.isMarked = "button";
-		this._active = true;
+		this.active = true;
 	}
 
 	onmouseup(event) {
@@ -232,39 +259,23 @@ class Button extends UI5Element {
 
 	onkeydown(event) {
 		if (isSpace(event) || isEnter(event)) {
-			this._active = true;
+			this.active = true;
 		}
 	}
 
 	onkeyup(event) {
 		if (isSpace(event) || isEnter(event)) {
-			this._active = false;
+			this.active = false;
 		}
 	}
 
 	_onfocusout(_event) {
-		this._active = false;
+		this.active = false;
+		this.focused = false;
 	}
 
-	get classes() {
-		return {
-			main: {
-				sapMBtn: true,
-				sapMBtnActive: this._active,
-				sapMBtnWithIcon: this.icon,
-				sapMBtnNoText: !this.textContent.length,
-				sapMBtnDisabled: this.disabled,
-				sapMBtnIconEnd: this.iconEnd,
-				[`sapMBtn${this.design}`]: true,
-				sapUiSizeCompact: getCompactSize(),
-			},
-			icon: {
-				sapWCIconInButton: true,
-			},
-			text: {
-				sapMBtnText: true,
-			},
-		};
+	_onfocusin() {
+		this.focused = true;
 	}
 
 	get rtl() {
diff --git a/packages/main/src/ToggleButton.js b/packages/main/src/ToggleButton.js
index e0b5fbc8a743..6c6d2b1c1643 100644
--- a/packages/main/src/ToggleButton.js
+++ b/packages/main/src/ToggleButton.js
@@ -70,12 +70,6 @@ class ToggleButton extends Button {
 		this.pressed = !this.pressed;
 		this.fireEvent("press", { pressed: this.pressed });
 	}
-
-	get classes() {
-		const result = super.classes;
-		result.main.sapMToggleBtnPressed = this.pressed;
-		return result;
-	}
 }
 
 ToggleButton.define();
diff --git a/packages/main/src/themes/Button.css b/packages/main/src/themes/Button.css
index c40c99a6a0a6..e25dce2fef83 100644
--- a/packages/main/src/themes/Button.css
+++ b/packages/main/src/themes/Button.css
@@ -1,123 +1,117 @@
 @import "./InvisibleTextStyles.css";
 
-:host(ui5-button:not([hidden])) {
+:host(:not([hidden])) {
 	display: inline-block;
 }
 
-ui5-button:not([hidden]) {
-	display: inline-block;
+:host {
+	min-width: var(--_ui5_button_base_min_width);
+	height: var(--_ui5_button_base_height);
+	font-family: var(--sapUiFontFamily);
+	font-size: var(--sapMFontMediumSize);
+	border-radius: var(--_ui5_button_border_radius);
+	border-width: 0.0625rem;
+	cursor: pointer;
+	background-color: var(--sapUiButtonBackground);
+	border: 1px solid var(--sapUiButtonBorderColor);
+	color: var(--sapUiButtonTextColor);
+	box-sizing: border-box;
 }
 
 :host([disabled]) {
 	pointer-events: none;
 }
 
-ui5-button[disabled] {
-	pointer-events: none;
-}
-
-button[dir="rtl"].sapMBtn.sapMBtnWithIcon .sapMBtnText {
+:host([has-icon]) button[dir="rtl"].ui5-button-inner .ui5-button-text {
 	margin-right: var(--_ui5_button_base_icon_margin);
 	margin-left: 0;
 }
 
-button[dir="rtl"].sapMBtn.sapMBtnIconEnd .sapWCIconInButton {
+:host([has-icon][icon-end]) button[dir="rtl"].ui5-button-inner .ui5-button-icon {
 	margin-right: var(--_ui5_button_base_icon_margin);
 	margin-left: 0;
 }
 
-button.sapUiSizeCompact .sapWCIconInButton {
+:host([data-ui5-compact-size]) .ui5-button-icon {
 	font-size: 1rem;
 }
 
-button.sapUiSizeCompact.sapMBtn {
-	padding: var(--_ui5_button_compact_padding);
-	min-height: var(--_ui5_button_compact_height);
+:host([data-ui5-compact-size]) {
+	height: var(--_ui5_button_compact_height);
 	min-width: var(--_ui5_button_base_min_compact_width);
 }
 
-ui5-button .sapMBtn::before {
-	/* this is a hack for a bug in IE https:/* github.com/philipwalton/flexbugs/issues/231 */
-	content: '';
-	min-height: inherit;
-	font-size: 0;
+:host([data-ui5-compact-size]) .ui5-button-inner {
+	padding: 0 var(--_ui5_button_compact_padding);
 }
 
-.sapMBtn {
-	width: 100%;
+.ui5-button-inner {
+	min-width: inherit;
+	cursor: inherit;
 	height: 100%;
-	min-width: var(--_ui5_button_base_min_width);
-	min-height: var(--_ui5_button_base_height);
-	font-family: var(--sapUiFontFamily);
-	font-size: var(--sapMFontMediumSize);
 	font-weight: normal;
 	box-sizing: border-box;
-	padding: var(--_ui5_button_base_padding);
-	border-radius: var(--_ui5_button_border_radius);
-	border-width: 0.0625rem;
-	cursor: pointer;
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	background-color: var(--sapUiButtonBackground);
-	border: 1px solid var(--sapUiButtonBorderColor);
-	color: var(--sapUiButtonTextColor);
-	text-shadow: var(--sapUiShadowText);
+	text-shadow: var(--_ui5_button_text_shadow);
 	outline: none;
+	padding: 0 var(--_ui5_button_base_padding);
 	position: relative;
+	background: transparent;
+	border: none;
+	font-size: inherit;
+	color: inherit;
+	text-shadow: inherit;
+	font-weight: inherit;
 }
 
-.sapMBtn:not(.sapMBtnActive):hover {
+:host(:not([active]):hover) {
 	background: var(--sapUiButtonHoverBackground);
 }
 
-.sapMBtn .sapWCIconInButton {
+.ui5-button-inner .ui5-button-icon {
 	font-size: var(--_ui5_button_base_icon_only_font_size);
 	position: relative;
 	color: inherit;
 }
 
-.sapMBtn.sapMBtnIconEnd {
+:host([icon-end]) .ui5-button-inner {
 	flex-direction: row-reverse;
 }
 
-.sapMBtn.sapMBtnIconEnd  .sapWCIconInButton {
+:host([icon-end]) .ui5-button-icon {
 	margin-left: var(--_ui5_button_base_icon_margin);
 }
 
-.sapMBtn.sapMBtnNoText {
-	padding: var(--_ui5_button_base_icon_only_padding);
+:host([icon-only]) .ui5-button-inner {
+	min-width: auto;
 }
 
-.sapMBtnText {
+.ui5-button-text {
 	outline: none;
 	position: relative;
 }
 
-.sapMBtn.sapMBtnWithIcon .sapMBtnText {
+:host([has-icon]) .ui5-button-text {
 	margin-left: var(--_ui5_button_base_icon_margin);
 }
 
-.sapMBtnDisabled {
+:host([disabled]) {
 	opacity: 0.5;
 	pointer-events: none;
 }
 
-.sapMBtn:focus::after {
-	content: "";
-	position: absolute;
-	border: var(--_ui5_button_focus_after_border);
-	top: var(--_ui5_button_focus_after_top);
-	bottom: var(--_ui5_button_focus_after_bottom);
-	left: var(--_ui5_button_focus_after_left);
-	right: var(--_ui5_button_focus_after_right);
+:host([focused]) {
+	outline: var(--_ui5_button_outline);
+	outline-offset: var(--_ui5_button_outline_offset);
 }
 
-.sapMBtn::-moz-focus-inner {
+.ui5-button-inner::-moz-focus-inner {
 	border: 0;
 }
 
-.sapMBtnActive {
+:host([active]:not([disabled])) {
 	background-image: none;
 	background-color: var(--sapUiButtonActiveBackground);
 	border-color: var(--_ui5_button_active_border_color);
@@ -125,72 +119,260 @@ ui5-button .sapMBtn::before {
 	text-shadow: none;
 }
 
-.sapMBtnActive:focus::after {
-	border-color: var(--sapUiContentContrastFocusColor);
+:host([active]) {
+	outline-color: var(--sapUiContentContrastFocusColor);
 }
 
-.sapMBtn.sapMBtnPositive {
+:host([design="Positive"]) {
 	background-color: var(--sapUiButtonAcceptBackground);
 	border-color: var(--_ui5_button_positive_border_color);
 	color: var(--sapUiButtonAcceptTextColor);
-	text-shadow: var(--sapUiShadowText);
+	text-shadow: var(--_ui5_button_text_shadow);
 }
 
-.sapMBtn.sapMBtnPositive:hover {
+:host([design="Positive"]:hover) {
 	background-color: var(--sapUiButtonAcceptHoverBackground);
 	border-color: var(--_ui5_button_positive_border_hover_color);
 }
 
-.sapMBtn.sapMBtnPositive.sapMBtnActive {
+:host([design="Positive"][active]) {
 	background-color: var(--sapUiButtonAcceptActiveBackground);
 	border-color: var(--_ui5_button_positive_border_active_color);
 	color: var(--sapUiButtonActiveTextColor);
 	text-shadow: none;
 }
 
-.sapMBtn.sapMBtnPositive:focus {
+:host([design="Positive"][focused]) {
+	outline-color: var(--_ui5_button_positive_border_focus_hover_color);
 	border-color: var(--_ui5_button_positive_focus_border_color);
 }
-.sapMBtn.sapMBtnPositive.sapMBtnActive:focus::after {
-	border-color: var(--sapUiContentContrastFocusColor);
-}
 
-.sapMBtn.sapMBtnPositive:focus::after {
-	border-color: var(--_ui5_button_positive_border_focus_hover_color);
+:host([design="Positive"][active][focused]) {
+	outline-color: var(--sapUiContentContrastFocusColor);
 }
 
-.sapMBtn.sapMBtnNegative {
+:host([design="Negative"]) {
 	background-color: var(--sapUiButtonRejectBackground);
 	border-color: var(--sapUiButtonRejectBorderColor);
 	color: var(--sapUiButtonRejectTextColor);
-	text-shadow: var(--sapUiShadowText);
+	text-shadow: var(--_ui5_button_text_shadow);
 }
 
-.sapMBtn.sapMBtnNegative:hover {
+:host([design="Negative"]:hover) {
 	background-color: var(--sapUiButtonRejectHoverBackground);
 	border-color: var(--sapUiButtonRejectHoverBorderColor);
 }
 
-.sapMBtn.sapMBtnNegative:focus {
+:host([design="Negative"][focused]) {
 	border-color: var(--_ui5_button_negative_focus_border_color);
+	outline-color: var(--_ui5_button_positive_border_focus_hover_color);
 }
 
-.sapMBtn.sapMBtnNegative.sapMBtnActive {
+:host([design="Negative"][active]) {
 	background-color: var(--sapUiButtonRejectActiveBackground);
 	border-color: var(--_ui5_button_negative_active_border_color);
 	color: var(--sapUiButtonActiveTextColor);
 	text-shadow: none;
 }
 
-.sapMBtn.sapMBtnNegative.sapMBtnActive:focus::after {
+:host([design="Negative"][active][focused]) {
+	outline-color: var(--sapUiContentContrastFocusColor);
+}
+
+:host([design="Emphasized"]) {
+	background-color: var(--sapUiButtonEmphasizedBackground);
+	border-color: var(--sapUiButtonEmphasizedBorderColor);
+	color: var(--sapUiButtonEmphasizedTextColor);
+	text-shadow: 0 0 0.125rem var(--sapUiButtonEmphasizedTextShadow);
+	font-weight: var(--_ui5_button_emphasized_font_weight);
+}
+
+:host([design="Emphasized"]:not([active]):hover) {
+	background-color: var(--sapUiButtonEmphasizedHoverBackground);
+	border-color: var(--sapUiButtonEmphasizedHoverBorderColor);
+}
+
+:host([design="Empasized"][active]) {
+	background-color: var(--sapUiButtonEmphasizedActiveBackground);
+	border-color: var(--sapUiButtonEmphasizedActiveBorderColor);
+	color: var(--sapUiButtonActiveTextColor);
+	text-shadow: none;
+}
+
+:host([design="Emphasized"][focused]) {
+	outline-color: var(--sapUiContentContrastFocusColor);
+	border-color: var(--_ui5_button_emphasized_focused_border_color);
+}
+
+:host([design="Transparent"]) {
+	background-color: var(--sapUiButtonLiteBackground);
+	border-color: var(--sapUiButtonLiteBorderColor);
+	color: var(--sapUiButtonLiteTextColor);
+	text-shadow: var(--_ui5_button_text_shadow);
+	border-color: transparent;
+}
+
+:host([design="Transparent"]):hover {
+	background-color: var(--sapUiButtonLiteHoverBackground);
+}
+
+:host([design="Transparent"][active]) {
+	background-color: var(--sapUiButtonLiteActiveBackground);
+	color: var(--sapUiButtonActiveTextColor);
+	text-shadow: none;
+}
+
+:host([design="Transparent"]:not([active]):hover) {
+	border-color: transparent;
+}
+
+/* IE Specific CSS */
+
+ui5-button[focused] {
+	outline: none;
+}
+
+ui5-button[focused] .ui5-button-inner {
+	position: relative;
+}
+
+ui5-button[focused] .ui5-button-inner::after {
+	content: "";
+	position: absolute;
+	border-width: 1px;
+	border-style: dotted;
+	border-color: var(--_ui5_button_focus_color);
+	top: var(--_ui5_button_focus_offset);
+	bottom: var(--_ui5_button_focus_offset);
+	left: var(--_ui5_button_focus_offset);
+	right: var(--_ui5_button_focus_offset);
+}
+
+ui5-button[active] .ui5-button-inner::after {
+	border-color: var(--sapUiContentContrastFocusColor);
+}
+
+ui5-button[design="Positive"][focused] .ui5-button-inner::after {
+	border-color: var(--_ui5_button_positive_border_focus_hover_color);
+}
+
+ui5-button[design="Positive"][active][focused] .ui5-button-inner::after {
 	border-color: var(--sapUiContentContrastFocusColor);
 }
 
-.sapMBtn.sapMBtnNegative:focus::after {
+ui5-button[design="Negative"][focused] .ui5-button-inner::after {
 	border-color: var(--_ui5_button_positive_border_focus_hover_color);
 }
 
-.sapMBtn.sapMBtnEmphasized {
+ui5-button[design="Negative"][active][focused] .ui5-button-inner::after {
+	border-color: var(--sapUiContentContrastFocusColor);
+}
+
+ui5-button[design="Emphasized"][focused] .ui5-button-inner::after {
+	border-color: var(--sapUiContentContrastFocusColor);
+}
+
+/* Remove this after ShadyCSS adoption has been done */
+
+ui5-button:not([hidden]) {
+	display: inline-block;
+}
+
+ui5-button {
+	min-width: var(--_ui5_button_base_min_width);
+	height: var(--_ui5_button_base_height);
+	font-family: var(--sapUiFontFamily);
+	font-size: var(--sapMFontMediumSize);
+	border-radius: var(--_ui5_button_border_radius);
+	border-width: 0.0625rem;
+	cursor: pointer;
+	background-color: var(--sapUiButtonBackground);
+	border: 1px solid var(--sapUiButtonBorderColor);
+	color: var(--sapUiButtonTextColor);
+	box-sizing: border-box;
+}
+
+ui5-button[disabled] {
+	pointer-events: none;
+}
+
+ui5-button[data-ui5-compact-size] {
+	height: var(--_ui5_button_compact_height);
+	min-width: var(--_ui5_button_base_min_compact_width);
+}
+
+ui5-button[data-ui5-compact-size] .ui5-button-inner {
+	padding: 0 var(--_ui5_button_compact_padding);
+}
+
+ui5-button:not([active]):hover {
+	background: var(--sapUiButtonHoverBackground);
+}
+
+ui5-button[icon-only] .ui5-button-inner {
+	min-width: auto;
+}
+
+ui5-button[disabled] {
+	opacity: 0.5;
+	pointer-events: none;
+}
+
+ui5-button[active]:not([disabled]) {
+	background-image: none;
+	background-color: var(--sapUiButtonActiveBackground);
+	border-color: var(--_ui5_button_active_border_color);
+	color: var(--sapUiButtonActiveTextColor);
+	text-shadow: none;
+}
+
+ui5-button[design="Positive"] {
+	background-color: var(--sapUiButtonAcceptBackground);
+	border-color: var(--_ui5_button_positive_border_color);
+	color: var(--sapUiButtonAcceptTextColor);
+	text-shadow: var(--_ui5_button_text_shadow);
+}
+
+ui5-button[design="Positive"]:hover {
+	background-color: var(--sapUiButtonAcceptHoverBackground);
+	border-color: var(--_ui5_button_positive_border_hover_color);
+}
+
+ui5-button[design="Positive"][active] {
+	background-color: var(--sapUiButtonAcceptActiveBackground);
+	border-color: var(--_ui5_button_positive_border_active_color);
+	color: var(--sapUiButtonActiveTextColor);
+	text-shadow: none;
+}
+
+ui5-button[design="Positive"][focused] {
+	border-color: var(--_ui5_button_positive_focus_border_color);
+}
+
+ui5-button[design="Negative"] {
+	background-color: var(--sapUiButtonRejectBackground);
+	border-color: var(--sapUiButtonRejectBorderColor);
+	color: var(--sapUiButtonRejectTextColor);
+	text-shadow: var(--_ui5_button_text_shadow);
+}
+
+ui5-button[design="Negative"]:hover {
+	background-color: var(--sapUiButtonRejectHoverBackground);
+	border-color: var(--sapUiButtonRejectHoverBorderColor);
+}
+
+ui5-button[design="Negative"][focused] {
+	border-color: var(--_ui5_button_negative_focus_border_color);
+}
+
+ui5-button[design="Negative"][active] {
+	background-color: var(--sapUiButtonRejectActiveBackground);
+	border-color: var(--_ui5_button_negative_active_border_color);
+	color: var(--sapUiButtonActiveTextColor);
+	text-shadow: none;
+}
+
+ui5-button[design="Emphasized"] {
 	background-color: var(--sapUiButtonEmphasizedBackground);
 	border-color: var(--sapUiButtonEmphasizedBorderColor);
 	color: var(--sapUiButtonEmphasizedTextColor);
@@ -198,45 +380,62 @@ ui5-button .sapMBtn::before {
 	font-weight: var(--_ui5_button_emphasized_font_weight);
 }
 
-.sapMBtn.sapMBtnEmphasized:hover {
+ui5-button[design="Emphasized"]:not([active]):hover {
 	background-color: var(--sapUiButtonEmphasizedHoverBackground);
 	border-color: var(--sapUiButtonEmphasizedHoverBorderColor);
 }
 
-.sapMBtn.sapMBtnEmphasized.sapMBtnActive {
+ui5-button[design="Empasized"][active] {
 	background-color: var(--sapUiButtonEmphasizedActiveBackground);
 	border-color: var(--sapUiButtonEmphasizedActiveBorderColor);
 	color: var(--sapUiButtonActiveTextColor);
 	text-shadow: none;
 }
 
-.sapMBtn.sapMBtnEmphasized:focus::after,
-.sapMBtn.sapMBtnEmphasized.sapMBtnActive:focus::after {
-	border-color: var(--sapUiContentContrastFocusColor);
-}
-
-.sapMBtn.sapMBtnEmphasized:focus {
+ui5-button[design="Emphasized"][focused] {
 	border-color: var(--_ui5_button_emphasized_focused_border_color);
 }
 
-.sapMBtn.sapMBtnTransparent {
+ui5-button[design="Transparent"] {
 	background-color: var(--sapUiButtonLiteBackground);
 	border-color: var(--sapUiButtonLiteBorderColor);
 	color: var(--sapUiButtonLiteTextColor);
-	text-shadow: var(--sapUiShadowText);
+	text-shadow: var(--_ui5_button_text_shadow);
 	border-color: transparent;
 }
 
-.sapMBtn.sapMBtnTransparent:hover {
+ui5-button[design="Transparent"]:hover {
 	background-color: var(--sapUiButtonLiteHoverBackground);
 }
 
-.sapMBtn.sapMBtnTransparent.sapMBtnActive {
+ui5-button[design="Transparent"][active] {
 	background-color: var(--sapUiButtonLiteActiveBackground);
 	color: var(--sapUiButtonActiveTextColor);
 	text-shadow: none;
 }
 
-.sapMBtn.sapMBtnTransparent:hover:not(.sapMBtnActive) {
+ui5-button[design="Transparent"]:not([active]):hover {
 	border-color: transparent;
 }
+
+ui5-button[icon-end] .ui5-button-icon {
+	margin-left: var(--_ui5_button_base_icon_margin);
+}
+
+ui5-button[icon-end] .ui5-button-inner {
+	flex-direction: row-reverse;
+}
+
+ui5-button[has-icon] button[dir="rtl"].ui5-button-inner .ui5-button-text {
+	margin-right: var(--_ui5_button_base_icon_margin);
+	margin-left: 0;
+}
+
+ui5-button[has-icon][icon-end] button[dir="rtl"].ui5-button-inner .ui5-button-icon {
+	margin-right: var(--_ui5_button_base_icon_margin);
+	margin-left: 0;
+}
+
+ui5-button[data-ui5-compact-size] .ui5-button-icon {
+	font-size: 1rem;
+}
\ No newline at end of file
diff --git a/packages/main/src/themes/ToggleButton.css b/packages/main/src/themes/ToggleButton.css
index 6a525f63ebe2..b7437454949a 100644
--- a/packages/main/src/themes/ToggleButton.css
+++ b/packages/main/src/themes/ToggleButton.css
@@ -1,8 +1,4 @@
-:host(ui5-togglebutton:not([hidden])) {
-	display: inline-block;
-}
-
-ui5-togglebutton:not([hidden]) {
+:host(:not([hidden])) {
 	display: inline-block;
 }
 
@@ -11,79 +7,314 @@ ui5-togglebutton:not([hidden]) {
 	pointer-events: none;
 }
 
-ui5-togglebutton[disabled] {
-	pointer-events: none;
-}
-
 ui5-togglebutton .sapMBtn::before { /* this is a hack for a bug in IE https:/* github.com/philipwalton/flexbugs/issues/231 */
 	content: '';
 	min-height: inherit;
 	font-size: 0;
 }
 
-.sapMBtn.sapMToggleBtnPressed {
+:host([design="Positive"][pressed]),
+:host([design="Positive"][pressed][focused]),
+:host([design="Positive"][pressed]:hover) {
+	background: var(--sapUiButtonAcceptActiveBackground);
+	border-color: var(--sapUiButtonAcceptActiveBorderColor);
 	color: var(--sapUiToggleButtonPressedTextColor);
-	text-shadow: none;
+	outline-color: var(--sapUiContentContrastFocusColor);
 }
 
-.sapMBtn.sapMToggleBtnPressed.sapMBtnNegative {
-	background-color: var(--sapUiButtonRejectActiveBackground);
+:host([design="Positive"][pressed][active]),
+:host([design="Positive"][pressed]:hover) {
+	background: var(--_ui5_toggle_button_pressed_positive_hover);
+}
+
+:host([design="Negative"][pressed]),
+:host([design="Negative"][pressed][focused]),
+:host([design="Negative"][pressed]:hover) {
+	background: var(--sapUiButtonRejectActiveBackground);
 	border-color: var(--sapUiButtonRejectActiveBorderColor);
 	color: var(--sapUiToggleButtonPressedTextColor);
+	outline-color: var(--sapUiContentContrastFocusColor);
+}
+
+:host([design="Negative"][pressed][active]),
+:host([design="Negative"][pressed]:hover) {
+	background: var(--_ui5_toggle_button_pressed_negative_hover);
+}
+
+
+:host([pressed]),
+:host([pressed]:hover),
+:host([pressed][focused]),
+:host([design="Transparent"][pressed]),
+:host([design="Transparent"][pressed]:hover),
+:host([design="Emphasized"][pressed]),
+:host([design="Emphasized"][pressed]:hover) {
+	background: var(--sapUiToggleButtonPressedBackground);
+	border-color: var(--sapUiToggleButtonPressedBorderColor);
+	color: var(--sapUiToggleButtonPressedTextColor);
+	outline-color: var(--sapUiContentContrastFocusColor);
+}
+
+:host([pressed][active]),
+:host([pressed]:hover) {
+	background: var(--sapUiToggleButtonPressedHoverBackground);
+}
+
+/* IE Specific CSS */
+
+ui5-togglebutton {
+	outline: none;
+}
+
+ui5-togglebutton[focused] .ui5-button-inner {
+	position: relative;
+}
+
+ui5-togglebutton[focused] .ui5-button-inner::after {
+	content: "";
+	position: absolute;
+	border-width: 1px;
+	border-style: dotted;
+	border-color: var(--_ui5_button_focus_color);
+	top: var(--_ui5_button_focus_offset);
+	bottom: var(--_ui5_button_focus_offset);
+	left: var(--_ui5_button_focus_offset);
+	right: var(--_ui5_button_focus_offset);
+}
+
+ui5-togglebutton[active] .ui5-button-inner::after {
+	border-color: var(--sapUiContentContrastFocusColor);
 }
 
-.sapMBtn.sapMToggleBtnPressed.sapMBtnNegative:active,
-.sapMBtn.sapMToggleBtnPressed.sapMBtnNegative:hover {
-	background-color: var(--_ui5_toggle_button_pressed_negative_hover);
+ui5-togglebutton[design="Positive"][focused] .ui5-button-inner::after {
+	border-color: var(--_ui5_button_positive_border_focus_hover_color);
+}
+
+ui5-togglebutton[design="Positive"][active][focused] .ui5-button-inner::after {
+	border-color: var(--sapUiContentContrastFocusColor);
+}
+
+ui5-togglebutton[design="Negative"][focused] .ui5-button-inner::after {
+	border-color: var(--_ui5_button_positive_border_focus_hover_color);
+}
+
+ui5-togglebutton[design="Negative"][active][focused] .ui5-button-inner::after {
+	border-color: var(--sapUiContentContrastFocusColor);
+}
+
+ui5-togglebutton[design="Emphasized"][focused] .ui5-button-inner::after {
+	border-color: var(--sapUiContentContrastFocusColor);
+}
+
+ui5-togglebutton[design="Positive"][pressed] .ui5-button-inner::after {
+	border-color: var(--sapUiContentContrastFocusColor);
+}
+
+ui5-togglebutton[design="Negative"][pressed] .ui5-button-inner::after {
 	border-color: var(--sapUiButtonRejectActiveBorderColor);
 }
 
-.sapMBtn.sapMToggleBtnPressed.sapMBtnPositive {
+ui5-togglebutton[design="Emphasized"][pressed] .ui5-button-inner::after {
+	border-color: var(--sapUiButtonEmphasizedBorderColor);
+}
+
+ui5-togglebutton[design="Transparent"][pressed] .ui5-button-inner::after {
+	border-color: var(--sapUiButtonLiteBorderColor);
+}
+
+/* Remove this after ShadyCSS adoption has been done */
+
+ui5-togglebutton:not([hidden]) {
+	display: inline-block;
+}
+
+ui5-togglebutton {
+	min-width: var(--_ui5_button_base_min_width);
+	height: var(--_ui5_button_base_height);
+	font-family: var(--sapUiFontFamily);
+	font-size: var(--sapMFontMediumSize);
+	border-radius: var(--_ui5_button_border_radius);
+	border-width: 0.0625rem;
+	cursor: pointer;
+	background-color: var(--sapUiButtonBackground);
+	border: 1px solid var(--sapUiButtonBorderColor);
+	color: var(--sapUiButtonTextColor);
+	box-sizing: border-box;
+}
+
+ui5-togglebutton[disabled] {
+	pointer-events: none;
+}
+
+ui5-togglebutton[data-ui5-compact-size] {
+	height: var(--_ui5_button_compact_height);
+	min-width: var(--_ui5_button_base_min_compact_width);
+}
+
+ui5-togglebutton[data-ui5-compact-size] .ui5-button-inner {
+	padding: 0 var(--_ui5_button_compact_padding);
+}
+
+ui5-togglebutton:not([active]):hover {
+	background: var(--sapUiButtonHoverBackground);
+}
+
+ui5-togglebutton[icon-only] .ui5-button-inner {
+	min-width: auto;
+}
+
+ui5-togglebutton[disabled] {
+	opacity: 0.5;
+	pointer-events: none;
+}
+
+ui5-togglebutton[active]:not([disabled]) {
+	background-image: none;
+	background-color: var(--sapUiButtonActiveBackground);
+	border-color: var(--_ui5_button_active_border_color);
+	color: var(--sapUiButtonActiveTextColor);
+	text-shadow: none;
+}
+
+ui5-togglebutton[design="Positive"] {
+	background-color: var(--sapUiButtonAcceptBackground);
+	border-color: var(--_ui5_button_positive_border_color);
+	color: var(--sapUiButtonAcceptTextColor);
+	text-shadow: var(--_ui5_button_text_shadow);
+}
+
+ui5-togglebutton[design="Positive"]:hover {
+	background-color: var(--sapUiButtonAcceptHoverBackground);
+	border-color: var(--_ui5_button_positive_border_hover_color);
+}
+
+ui5-togglebutton[design="Positive"][active] {
 	background-color: var(--sapUiButtonAcceptActiveBackground);
-	border-color: var(--sapUiButtonAcceptActiveBorderColor);
-	color: var(--sapUiToggleButtonPressedTextColor);
+	border-color: var(--_ui5_button_positive_border_active_color);
+	color: var(--sapUiButtonActiveTextColor);
+	text-shadow: none;
+}
+
+ui5-togglebutton[design="Positive"][focused] {
+	border-color: var(--_ui5_button_positive_focus_border_color);
 }
 
-.sapMBtn.sapMToggleBtnPressed.sapMBtnPositive:active,
-.sapMBtn.sapMToggleBtnPressed.sapMBtnPositive:hover {
-	background-color: var(--_ui5_toggle_button_pressed_positive_hover);
+ui5-togglebutton[design="Negative"] {
+	background-color: var(--sapUiButtonRejectBackground);
+	border-color: var(--sapUiButtonRejectBorderColor);
+	color: var(--sapUiButtonRejectTextColor);
+	text-shadow: var(--_ui5_button_text_shadow);
+}
+
+ui5-togglebutton[design="Negative"]:hover {
+	background-color: var(--sapUiButtonRejectHoverBackground);
+	border-color: var(--sapUiButtonRejectHoverBorderColor);
+}
+
+ui5-togglebutton[design="Negative"][focused] {
+	border-color: var(--_ui5_button_negative_focus_border_color);
+}
+
+ui5-togglebutton[design="Negative"][active] {
+	background-color: var(--sapUiButtonRejectActiveBackground);
+	border-color: var(--_ui5_button_negative_active_border_color);
+	color: var(--sapUiButtonActiveTextColor);
+	text-shadow: none;
+}
+
+ui5-togglebutton[design="Emphasized"] {
+	background-color: var(--sapUiButtonEmphasizedBackground);
+	border-color: var(--sapUiButtonEmphasizedBorderColor);
+	color: var(--sapUiButtonEmphasizedTextColor);
+	text-shadow: 0 0 0.125rem var(--sapUiButtonEmphasizedTextShadow);
+	font-weight: var(--_ui5_button_emphasized_font_weight);
+}
+
+ui5-togglebutton[design="Emphasized"]:not([active]):hover {
+	background-color: var(--sapUiButtonEmphasizedHoverBackground);
+	border-color: var(--sapUiButtonEmphasizedHoverBorderColor);
+}
+
+ui5-togglebutton[design="Empasized"][active] {
+	background-color: var(--sapUiButtonEmphasizedActiveBackground);
+	border-color: var(--sapUiButtonEmphasizedActiveBorderColor);
+	color: var(--sapUiButtonActiveTextColor);
+	text-shadow: none;
+}
+
+ui5-togglebutton[design="Emphasized"][focused] {
+	border-color: var(--_ui5_button_emphasized_focused_border_color);
+}
+
+ui5-togglebutton[design="Transparent"] {
+	background-color: var(--sapUiButtonLiteBackground);
+	border-color: var(--sapUiButtonLiteBorderColor);
+	color: var(--sapUiButtonLiteTextColor);
+	text-shadow: var(--_ui5_button_text_shadow);
+	border-color: transparent;
+}
+
+ui5-togglebutton[design="Transparent"]:hover {
+	background-color: var(--sapUiButtonLiteHoverBackground);
+}
+
+ui5-togglebutton[design="Transparent"][active] {
+	background-color: var(--sapUiButtonLiteActiveBackground);
+	color: var(--sapUiButtonActiveTextColor);
+	text-shadow: none;
+}
+
+ui5-togglebutton[design="Transparent"]:not([active]):hover {
+	border-color: transparent;
+}
+
+ui5-togglebutton[icon-end] .ui5-button-icon {
+	margin-left: var(--_ui5_button_base_icon_margin);
+}
+
+ui5-togglebutton[icon-end] .ui5-button-inner {
+	flex-direction: row-reverse;
+}
+
+ui5-togglebutton[design="Positive"][pressed],
+ui5-togglebutton[design="Positive"][pressed][focused],
+ui5-togglebutton[design="Positive"][pressed]:hover {
+	background: var(--sapUiButtonAcceptActiveBackground);
 	border-color: var(--sapUiButtonAcceptActiveBorderColor);
+	color: var(--sapUiToggleButtonPressedTextColor);
 }
 
-.sapMBtn.sapMToggleBtnPressed.sapMBtnDefault:not(:active):not(:hover),
-.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:not(:active):not(:hover),
-.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:not(:active):not(:hover) {
-	background-color: var(--sapUiToggleButtonPressedBackground);
-	border-color: var(--sapUiToggleButtonPressedBorderColor);
+ui5-togglebutton[design="Positive"][pressed][active],
+ui5-togglebutton[design="Positive"][pressed]:hover {
+	background: var(--_ui5_toggle_button_pressed_positive_hover);
 }
 
-.sapMBtn.sapMToggleBtnPressed:not(.sapMBtnNegative):not(.sapMBtnPositive):focus,
-.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:focus,
-.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:focus {
-	border-color: var(--_ui5_toggle_button_pressed_focussed);
+ui5-togglebutton[design="Negative"][pressed],
+ui5-togglebutton[design="Negative"][pressed][focused],
+ui5-togglebutton[design="Negative"][pressed]:hover {
+	background: var(--sapUiButtonRejectActiveBackground);
+	border-color: var(--sapUiButtonRejectActiveBorderColor);
+	color: var(--sapUiToggleButtonPressedTextColor);
 }
 
-.sapMBtn.sapMToggleBtnPressed:focus:after,
-.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:focus:after,
-.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:focus:after {
-	border-color: var(--sapUiContentContrastFocusColor);
+ui5-togglebutton[design="Negative"][pressed][active],
+ui5-togglebutton[design="Negative"][pressed]:hover {
+	background: var(--_ui5_toggle_button_pressed_negative_hover);
 }
 
-.sapMBtn.sapMToggleBtnPressed:active,
-.sapMBtn.sapMToggleBtnPressed:hover,
-.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:active,
-.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:hover,
-.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:active,
-.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:hover {
-	background-color: var(--sapUiToggleButtonPressedHoverBackground);
-	border-color: var(--sapUiToggleButtonPressedHoverBorderColor);
+ui5-togglebutton[pressed],
+ui5-togglebutton[pressed]:hover,
+ui5-togglebutton[pressed][focused],
+ui5-togglebutton[design="Transparent"][pressed],
+ui5-togglebutton[design="Transparent"][pressed]:hover,
+ui5-togglebutton[design="Emphasized"][pressed],
+ui5-togglebutton[design="Emphasized"][pressed]:hover {
+	background: var(--sapUiToggleButtonPressedBackground);
+	border-color: var(--sapUiToggleButtonPressedBorderColor);
+	color: var(--sapUiToggleButtonPressedTextColor);
 }
 
-.sapMBtn.sapMToggleBtnPressed:active:focus
-.sapMBtn.sapMToggleBtnPressed:hover:focus,
-.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:active:focus,
-.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:hover:focus,
-.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:active:focus,
-.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:hover:focus {
-	border-color: var(--_ui5_toggle_button_pressed_focussed_hovered);
+ui5-togglebutton[pressed][active],
+ui5-togglebutton[pressed]:hover {
+	background: var(--sapUiToggleButtonPressedHoverBackground);
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/base/Button-parameters.css b/packages/main/src/themes/base/Button-parameters.css
index 049a5007fff0..21eeadc96658 100644
--- a/packages/main/src/themes/base/Button-parameters.css
+++ b/packages/main/src/themes/base/Button-parameters.css
@@ -4,19 +4,20 @@
 	--_ui5_button_base_height: 2.5rem;
 	--_ui5_button_compact_height: 1.625rem;
 	--_ui5_button_border_radius: 0.2rem;
-	--_ui5_button_base_padding: 0 0.6875rem 0 0.6875rem;
-	--_ui5_button_compact_padding: 0 0.4375rem;
-	--_ui5_button_base_icon_only_padding: 0 0.5625rem;
+	--_ui5_button_base_padding: 0.6875rem;
+	--_ui5_button_compact_padding: 0.4375rem;
+	--_ui5_button_base_icon_only_padding: 0.5625rem;
 	--_ui5_button_base_icon_margin: 0.563rem;
 	--_ui5_button_base_icon_only_font_size: 1.375rem;
-	--_ui5_button_focus_after_border: 1px dotted var(--sapUiContentFocusColor);
-	--_ui5_button_focus_after_bottom: 1px;
-	--_ui5_button_focus_after_right: 1px;
-	--_ui5_button_focus_after_left: 1px;
-	--_ui5_button_focus_after_top: 1px;
+	--_ui5_button_outline: 1px dotted var(--sapUiContentFocusColor);
+	--_ui5_button_outline_offset: calc(-1 * .1875rem);
 	--_ui5_button_emphasized_font_weight: normal;
+	--_ui5_button_text_shadow: var(--sapUiShadowText);
+	--_ui5_button_focus_offset: 1px;
+	--_ui5_button_focus_width: 1px;
+	--_ui5_button_focus_color: var(--sapUiContentFocusColor);
+
 
-	--_ui5_button_focussed_border_color: var(--sapUiButtonBorderColor);
 	--_ui5_button_active_border_color: var(--sapUiButtonActiveBorderColor);
 	--_ui5_button_positive_border_color: var(--sapUiButtonAcceptBorderColor);
 	--_ui5_button_positive_border_hover_color: var(--sapUiButtonAcceptHoverBorderColor);
diff --git a/packages/main/src/themes/sap_belize_hcb/Button-parameters.css b/packages/main/src/themes/sap_belize_hcb/Button-parameters.css
index 3b07f96af1ba..1069ea025a04 100644
--- a/packages/main/src/themes/sap_belize_hcb/Button-parameters.css
+++ b/packages/main/src/themes/sap_belize_hcb/Button-parameters.css
@@ -2,15 +2,14 @@
 
 :root {
 	--_ui5_button_border_radius: 0.375rem;
-	--_ui5_button_focus_after_bottom: -1px;
-	--_ui5_button_focus_after_right: -1px;
-	--_ui5_button_focus_after_left: -1px;
-	--_ui5_button_focus_after_top: -1px;
-	--_ui5_button_focus_after_border: 0.125rem dotted var(--sapUiContentFocusColor);
-	--_ui5_button_focussed_border_color: transparent;
+	--_ui5_button_outline_offset: -0.125rem;
+	--_ui5_button_outline: 0.125rem dotted var(--sapUiContentFocusColor);
 	--_ui5_button_positive_border_active_color: transparent;
 	--_ui5_button_active_border_color: transparent;
 	--_ui5_button_positive_focus_border_color: transparent;
 	--_ui5_button_negative_focus_border_color: transparent;
 	--_ui5_button_negative_active_border_color: transparent;
+	--_ui5_button_focus_width: 1px;
+	--_ui5_button_focus_color: var(--sapUiContentFocusColor);
+	--_ui5_button_focussed_border_color: transparent;
 }
diff --git a/packages/main/src/themes/sap_fiori_3/Button-parameters.css b/packages/main/src/themes/sap_fiori_3/Button-parameters.css
index 37551e2b3065..f3de08baf69c 100644
--- a/packages/main/src/themes/sap_fiori_3/Button-parameters.css
+++ b/packages/main/src/themes/sap_fiori_3/Button-parameters.css
@@ -4,9 +4,10 @@
 	--_ui5_button_base_min_width: 2.25rem;
 	--_ui5_button_base_height: 2.25rem;
 	--_ui5_button_border_radius: 0.25rem;
-	--_ui5_button_base_padding: 0 0.5625rem;
-	--_ui5_button_base_icon_only_padding: 0 0.5625rem;
+	--_ui5_button_base_padding: 0.5625rem;
+	--_ui5_button_base_icon_only_padding: 0.5625rem;
 	--_ui5_button_base_icon_margin: 0.375rem;
 	--_ui5_button_base_icon_only_font_size: 1rem;
 	--_ui5_button_emphasized_font_weight: bold;
+	--_ui5_button_text_shadow: none;
 }
diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/Button.html b/packages/main/test/sap/ui/webcomponents/main/pages/Button.html
index e237ebe88fac..d106aa4b1e60 100644
--- a/packages/main/test/sap/ui/webcomponents/main/pages/Button.html
+++ b/packages/main/test/sap/ui/webcomponents/main/pages/Button.html
@@ -17,15 +17,15 @@
 	</script>
 
 	<script src="../../../../../../webcomponentsjs/webcomponents-loader.js"></script>
-	<script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js" type="module"></script>
+	<script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js" design="module"></script>
 	<script nomodule src="../../../../../../resources/sap/ui/webcomponents/main/bundle.es5.js">
 	</script>
 </head>
 
-<body>
+<body style="background: qq">
 	<ui5-button id="button1" design="Emphasized">Action Bar Button</ui5-button>
-	<ui5-button>Primary <br> button</ui5-button>
-	<ui5-button design="Transparent">Secondary <span style="color:red;">button</span></ui5-button>
+	<ui5-button style="height: auto">Primary <br> button</ui5-button>
+	<ui5-button style="height: auto" design="Transparent">Secondary <span style="color:red;">button</span></ui5-button>
 	<ui5-button disabled id="button-disabled">Inactive</ui5-button>
 	<ui5-button design="Positive">Accept</ui5-button>
 	<ui5-button design="Negative">Decline</ui5-button>
@@ -36,7 +36,7 @@
 	<ui5-input id="press-counter"></ui5-input>
 	<ui5-input id="click-counter"></ui5-input>
 
-	<ui5-button design="Emphasized">Action<br> Bar<br> Button</ui5-button>
+	<ui5-button style="height: auto" design="Emphasized">Action<br> Bar<br> Button</ui5-button>
 	<ui5-button>Primary button</ui5-button>
 	<ui5-button design="Transparent">Secondary button</ui5-button>
 	<ui5-button disabled>Inactive</ui5-button>
@@ -107,12 +107,12 @@
 	<br/>
 	<br/>
 
-	<ui5-togglebutton type="Emphasized">Action Bar Button</ui5-togglebutton>
+	<ui5-togglebutton design="Emphasized">Action Bar Button</ui5-togglebutton>
 	<ui5-togglebutton>Primary button</ui5-togglebutton>
-	<ui5-togglebutton type="Transparent">Secondary button</ui5-togglebutton>
+	<ui5-togglebutton design="Transparent">Secondary button</ui5-togglebutton>
 	<ui5-togglebutton disabled>Inactive</ui5-togglebutton>
-	<ui5-togglebutton type="Positive">Agree</ui5-togglebutton>
-	<ui5-togglebutton type="Negative">Decline</ui5-togglebutton>
+	<ui5-togglebutton design="Positive">Agree</ui5-togglebutton>
+	<ui5-togglebutton design="Negative">Decline</ui5-togglebutton>
 
 	<br/>
 	<br/>
@@ -126,28 +126,28 @@
 	<br/>
 	<br/>
 
-	<ui5-togglebutton type="Default" icon="sap-icon://employee">Default</ui5-togglebutton>
-	<ui5-togglebutton disabled type="Default" icon="sap-icon://employee">Default</ui5-togglebutton>
+	<ui5-togglebutton design="Default" icon="sap-icon://employee">Default</ui5-togglebutton>
+	<ui5-togglebutton disabled design="Default" icon="sap-icon://employee">Default</ui5-togglebutton>
 	<br/>
 	<br/>
 
-	<ui5-togglebutton type="Positive" icon="sap-icon://employee">Agree</ui5-togglebutton>
-	<ui5-togglebutton disabled type="Positive" icon="sap-icon://employee">Agree</ui5-togglebutton>
+	<ui5-togglebutton design="Positive" icon="sap-icon://employee">Agree</ui5-togglebutton>
+	<ui5-togglebutton disabled design="Positive" icon="sap-icon://employee">Agree</ui5-togglebutton>
 	<br/>
 	<br/>
 
-	<ui5-togglebutton type="Negative" icon="sap-icon://employee">Decline</ui5-togglebutton>
-	<ui5-togglebutton disabled type="Negative" icon="sap-icon://employee">Decline</ui5-togglebutton>
+	<ui5-togglebutton design="Negative" icon="sap-icon://employee">Decline</ui5-togglebutton>
+	<ui5-togglebutton disabled design="Negative" icon="sap-icon://employee">Decline</ui5-togglebutton>
 	<br/>
 	<br/>
 
-	<ui5-togglebutton type="Transparent" icon="sap-icon://employee">Transparent</ui5-togglebutton>
-	<ui5-togglebutton disabled type="Transparent" icon="sap-icon://employee">Transparent</ui5-togglebutton>
+	<ui5-togglebutton design="Transparent" icon="sap-icon://employee">Transparent</ui5-togglebutton>
+	<ui5-togglebutton disabled design="Transparent" icon="sap-icon://employee">Transparent</ui5-togglebutton>
 	<br/>
 	<br/>
 
-	<ui5-togglebutton type="Emphasized" icon="sap-icon://employee">Emphasized</ui5-togglebutton>
-	<ui5-togglebutton disabled type="Emphasized" icon="sap-icon://employee">Emphasized</ui5-togglebutton>
+	<ui5-togglebutton design="Emphasized" icon="sap-icon://employee">Emphasized</ui5-togglebutton>
+	<ui5-togglebutton disabled design="Emphasized" icon="sap-icon://employee">Emphasized</ui5-togglebutton>
 
 
 	<script>
diff --git a/packages/main/test/sap/ui/webcomponents/main/qunit/Button.qunit.js b/packages/main/test/sap/ui/webcomponents/main/qunit/Button.qunit.js
index e25f7171d371..2e0a359e5a11 100644
--- a/packages/main/test/sap/ui/webcomponents/main/qunit/Button.qunit.js
+++ b/packages/main/test/sap/ui/webcomponents/main/qunit/Button.qunit.js
@@ -5,7 +5,7 @@ TestHelper.ready(function () {
 	var fixture = window.document.querySelector("#qunit-fixture");
 
 	var getActualText = function(el) {
-		return el.shadowRoot.querySelector('.sapMBtnText>bdi>slot').assignedNodes()[0].textContent;
+		return el.shadowRoot.querySelector('.ui5-button-text>bdi>slot').assignedNodes()[0].textContent;
 	};
 
 	QUnit.module("Web Components", {