diff --git a/javascript/commons/Analytics.js b/javascript/commons/Analytics.js
index b88ca438fde..e3194f769ef 100644
--- a/javascript/commons/Analytics.js
+++ b/javascript/commons/Analytics.js
@@ -320,7 +320,7 @@ liquipedia.analytics = {
 
 	setupButtonClickAnalytics: function() {
 		liquipedia.analytics.clickTrackers.push( {
-			selector: '.btn:not(a *), button:not(a *)',
+			selector: 'button:not(a *)',
 			trackerName: BUTTON_CLICKED,
 			propertiesBuilder: ( link ) => ( {
 				title: link.innerText,
diff --git a/javascript/commons/Collapse.js b/javascript/commons/Collapse.js
index a0ce26ce8ba..e1c5d75ba51 100644
--- a/javascript/commons/Collapse.js
+++ b/javascript/commons/Collapse.js
@@ -23,7 +23,7 @@ liquipedia.collapse = {
 	makeDesignButton: function( collapsible, isShow ) {
 		const title = ( isShow ? 'Show' : 'Hide' );
 		const button = document.createElement( 'button' );
-		button.classList.add( 'collapseButton', 'btn', 'btn-secondary', 'btn-extrasmall' );
+		button.classList.add( 'collapseButton', 'button', 'button--secondary', 'button--extrasmall' );
 		button.classList.add( isShow ? 'collapseButtonShow' : 'collapseButtonHide' );
 		button.setAttribute( 'role', 'button' );
 		button.setAttribute( 'aria-label', title );
@@ -174,7 +174,7 @@ liquipedia.collapse = {
 				hideAllText = 'Hide all';
 			}
 			const button = document.createElement( 'button' );
-			button.classList.add( 'btn', 'btn-secondary', 'btn-small' );
+			button.classList.add( 'button', 'button--secondary', 'button--small' );
 			if ( toggleGroup.classList.contains( 'toggle-state-hide' ) ) {
 				button.innerHTML = this.makeIcon( false ) + ' ' + hideAllText;
 			} else {
@@ -219,7 +219,7 @@ liquipedia.collapse = {
 					} else {
 						box.classList.add( 'dropdown-box-visible' );
 						toggleActive = true;
-						box.querySelectorAll( '.btn' ).forEach( ( btn ) => {
+						box.querySelectorAll( '.button' ).forEach( ( btn ) => {
 							btn.addEventListener( 'click', () => {
 								dropdownButton.innerHTML = btn.textContent + ' <span class="caret"></span>';
 								box.classList.remove( 'dropdown-box-visible' );
diff --git a/javascript/commons/Commons_tools.js b/javascript/commons/Commons_tools.js
index 8432fd20433..7055bf15fec 100644
--- a/javascript/commons/Commons_tools.js
+++ b/javascript/commons/Commons_tools.js
@@ -11,11 +11,11 @@ liquipedia.commonstools = {
 	createForms: function() {
 		const checkForPageExistenceForm = document.getElementById( 'checkforpageexistence' );
 		if ( checkForPageExistenceForm !== null ) {
-			checkForPageExistenceForm.innerHTML = '<form id="checkforpageexistenceform"><input id="checkforpageexistenceinput" placeholder="Name of page" class="form-control"><button id="checkforpageexistencebutton" class="btn btn-primary" type="submit">Search</button></form><div id="checkforpageexistenceresult"></div>';
+			checkForPageExistenceForm.innerHTML = '<form id="checkforpageexistenceform"><input id="checkforpageexistenceinput" placeholder="Name of page" class="form-control"><button id="checkforpageexistencebutton" class="button button--primary" type="submit">Search</button></form><div id="checkforpageexistenceresult"></div>';
 		}
 		const checkPageTextForm = document.getElementById( 'checkpagetext' );
 		if ( checkPageTextForm !== null ) {
-			checkPageTextForm.innerHTML = '<form id="checkpagetextform"><input id="checkpagetextforminputname" placeholder="Name of page" class="form-control"><input id="checkpagetextforminputsource" placeholder="Source wiki" class="form-control"><button id="checkpagetextbutton" class="btn btn-primary" type="submit">Search</button></form><div id="checkpagetextresult"></div>';
+			checkPageTextForm.innerHTML = '<form id="checkpagetextform"><input id="checkpagetextforminputname" placeholder="Name of page" class="form-control"><input id="checkpagetextforminputsource" placeholder="Source wiki" class="form-control"><button id="checkpagetextbutton" class="button button--primary" type="submit">Search</button></form><div id="checkpagetextresult"></div>';
 		}
 	},
 	createCallbacks: function() {
@@ -178,8 +178,8 @@ liquipedia.commonstools = {
 				const page = data.query.pages[ 0 ];
 				const link = document.createElement( 'a' );
 				const postButton = document.createElement( 'button' );
-				postButton.classList.add( 'btn' );
-				postButton.classList.add( 'btn-primary' );
+				postButton.classList.add( 'button' );
+				postButton.classList.add( 'button--primary' );
 				const span = document.createElement( 'span' );
 				link.href = '/' + wiki + '/' + page.title;
 				postButton.type = 'button';
diff --git a/javascript/commons/ExportImage.js b/javascript/commons/ExportImage.js
index 5331bb613f9..03f280caad4 100644
--- a/javascript/commons/ExportImage.js
+++ b/javascript/commons/ExportImage.js
@@ -934,7 +934,7 @@ class DropdownWidget {
 			'<span style="line-height: 1">Share</span>';
 
 		const button = this.createElement( 'button', {
-			class: 'btn btn-ghost btn-extrasmall dropdown-widget__toggle',
+			class: 'button button--ghost button--extrasmall dropdown-widget__toggle',
 			type: 'button',
 			title: 'Share',
 			'aria-label': 'Share this content',
diff --git a/javascript/commons/Miscellaneous.js b/javascript/commons/Miscellaneous.js
index 3ddeb576486..7cd294a8c7c 100644
--- a/javascript/commons/Miscellaneous.js
+++ b/javascript/commons/Miscellaneous.js
@@ -33,9 +33,9 @@ liquipedia.teamcard = {
 				hideplayers = 'Hide Players';
 			}
 			const button = document.createElement( 'button' );
-			button.classList.add( 'btn' );
-			button.classList.add( 'btn-secondary' );
-			button.classList.add( 'btn-small' );
+			button.classList.add( 'button' );
+			button.classList.add( 'button--secondary' );
+			button.classList.add( 'button--small' );
 			button.innerHTML = showplayers;
 			button.addEventListener( 'click', () => {
 				if ( teamcardsopened ) {
@@ -67,7 +67,7 @@ liquipedia.teamcard = {
 		document.querySelectorAll( '.teamcard-former-toggle-button' ).forEach( ( wrap ) => {
 			const teamcard = wrap.closest( '.teamcard' );
 			const button = document.createElement( 'button' );
-			button.classList.add( 'btn', 'btn-secondary', 'btn-small' );
+			button.classList.add( 'button', 'button--secondary', 'button--small' );
 			let width = 156;
 			if ( typeof wrap.dataset.width !== 'undefined' ) {
 				width = parseInt( wrap.dataset.width );
@@ -118,7 +118,7 @@ liquipedia.teamcard = {
 		document.querySelectorAll( '.teamcard-subs-toggle-button' ).forEach( ( wrap ) => {
 			const teamcard = wrap.closest( '.teamcard' );
 			const button = document.createElement( 'button' );
-			button.classList.add( 'btn', 'btn-secondary', 'btn-small' );
+			button.classList.add( 'button', 'button--secondary', 'button--small' );
 			let width = 156;
 			if ( typeof wrap.dataset.width !== 'undefined' ) {
 				width = parseInt( wrap.dataset.width );
@@ -170,7 +170,7 @@ liquipedia.teamcard = {
 		document.querySelectorAll( '.teamcard-active-toggle-button' ).forEach( ( wrap ) => {
 			const teamcard = wrap.closest( '.teamcard' );
 			const button = document.createElement( 'button' );
-			button.classList.add( 'btn', 'btn-secondary', 'btn-small' );
+			button.classList.add( 'button', 'button--secondary', 'button--small' );
 			let width = 156;
 			if ( typeof wrap.dataset.width !== 'undefined' ) {
 				width = parseInt( wrap.dataset.width );
diff --git a/javascript/commons/Selectall.js b/javascript/commons/Selectall.js
index dcd4f849dd3..1fb1b1550b0 100644
--- a/javascript/commons/Selectall.js
+++ b/javascript/commons/Selectall.js
@@ -23,8 +23,8 @@ class SelectAllContainer {
 
 	createSelectButton() {
 		const selectButton = document.createElement( 'button' );
-		selectButton.classList.add( 'btn' );
-		selectButton.classList.add( 'btn-secondary' );
+		selectButton.classList.add( 'button' );
+		selectButton.classList.add( 'button--secondary' );
 		selectButton.innerHTML = 'Select';
 		selectButton.addEventListener( 'click', () => this.selectElementText() );
 		return selectButton;
@@ -32,8 +32,8 @@ class SelectAllContainer {
 
 	createSelectAllButton() {
 		const selectCopyButton = document.createElement( 'button' );
-		selectCopyButton.classList.add( 'btn' );
-		selectCopyButton.classList.add( 'btn-primary' );
+		selectCopyButton.classList.add( 'button' );
+		selectCopyButton.classList.add( 'button--primary' );
 		selectCopyButton.innerHTML = 'Select and copy';
 
 		selectCopyButton.addEventListener( 'click', async () => {
diff --git a/javascript/commons/Slider.js b/javascript/commons/Slider.js
index 9d271747651..2349388c651 100644
--- a/javascript/commons/Slider.js
+++ b/javascript/commons/Slider.js
@@ -28,7 +28,7 @@ liquipedia.slider = {
 	initSlider: function ( container ) {
 		const makeButton = ( faIcon ) => {
 			const button = document.createElement( 'div' );
-			button.className = `btn btn-secondary btn-extrasmall fas fa-${ faIcon }`;
+			button.className = `button button--secondary button--extrasmall fas fa-${ faIcon }`;
 			return button;
 		};
 
diff --git a/lua/wikis/ageofempires/ParticipantTable/Custom.lua b/lua/wikis/ageofempires/ParticipantTable/Custom.lua
index 4e94e316f57..557408568b3 100644
--- a/lua/wikis/ageofempires/ParticipantTable/Custom.lua
+++ b/lua/wikis/ageofempires/ParticipantTable/Custom.lua
@@ -123,7 +123,7 @@ function AoEParticipantTable:_createTitle(tabletitle, buttontitle, togglearea, b
 			:css('width', width or self.config.width)
 			:css('vertical-align', 'middle')
 			:tag('span')
-				:addClass('toggle-area-button btn btn-small btn-primary')
+				:addClass('toggle-area-button button button--small button--primary')
 				:attr('data-toggle-area-btn', buttonarea)
 				:css('position', 'absolute')
 				:wikitext(buttontitle)
diff --git a/lua/wikis/commons/MatchTicker/DisplayComponents.lua b/lua/wikis/commons/MatchTicker/DisplayComponents.lua
index 869655bc2ab..4edaf3a0bf9 100644
--- a/lua/wikis/commons/MatchTicker/DisplayComponents.lua
+++ b/lua/wikis/commons/MatchTicker/DisplayComponents.lua
@@ -293,7 +293,7 @@ function Details:_matchPageIcon()
 	if Logic.isEmpty(matchPage) then return end
 
 	local display = mw.html.create('div')
-		:addClass('btn-secondary btn btn-extrasmall')
+		:addClass('button--secondary button button--extrasmall')
 		:wikitext(Icon.makeIcon{iconName = 'matchpopup'})
 
 	return Page.makeInternalLink(tostring(display), matchPage)
diff --git a/lua/wikis/commons/Widget/Basic/Button.lua b/lua/wikis/commons/Widget/Basic/Button.lua
index 18417ef3540..84ae807d744 100644
--- a/lua/wikis/commons/Widget/Basic/Button.lua
+++ b/lua/wikis/commons/Widget/Basic/Button.lua
@@ -37,25 +37,25 @@ local defaultProps = {
 ---@return HtmlNode
 local function Button(props)
 	--- MW Parser does not allowed the <button> tag, so we use a <div>
-	local cssClasses = {'btn'}
+	local cssClasses = {'button'}
 	if props.variant == 'primary' then
-		table.insert(cssClasses, 'btn-primary')
+		table.insert(cssClasses, 'button--primary')
 	elseif props.variant == 'secondary' then
-		table.insert(cssClasses, 'btn-secondary')
+		table.insert(cssClasses, 'button--secondary')
 	elseif props.variant == 'themed' then
-		table.insert(cssClasses, 'btn-themed')
+		table.insert(cssClasses, 'button--themed')
 	elseif props.variant == 'ghost' then
-		table.insert(cssClasses, 'btn-ghost')
+		table.insert(cssClasses, 'button--ghost')
 	elseif props.variant == 'destructive' then
-		table.insert(cssClasses, 'btn-destructive')
+		table.insert(cssClasses, 'button--destructive')
 	end
 
 	if props.size == 'xs' then
-		table.insert(cssClasses, 'btn-extrasmall')
+		table.insert(cssClasses, 'button--extrasmall')
 	elseif props.size == 'sm' then
-		table.insert(cssClasses, 'btn-small')
+		table.insert(cssClasses, 'button--small')
 	elseif props.size == 'lg' then
-		table.insert(cssClasses, 'btn-large')
+		table.insert(cssClasses, 'button--large')
 	end
 
 	local cssTable = {}
diff --git a/lua/wikis/commons/Widget/Match/VodsDropdownButton.lua b/lua/wikis/commons/Widget/Match/VodsDropdownButton.lua
index 89fd3a1507f..3e1039a1ec7 100644
--- a/lua/wikis/commons/Widget/Match/VodsDropdownButton.lua
+++ b/lua/wikis/commons/Widget/Match/VodsDropdownButton.lua
@@ -43,7 +43,7 @@ function VodsDropdownButton:render()
 		variant = 'secondary',
 	}
 	local hideButton = Button{
-		classes = {'general-collapsible-collapse-button', 'btn--active'},
+		classes = {'general-collapsible-collapse-button', 'button---active'},
 		children = Span{
 			children = {
 				ImageIcon{imageLight = VodLink.getIcon()},
diff --git a/stylesheets/commons/Mainpage.scss b/stylesheets/commons/Mainpage.scss
index c895ac14199..925ae1a1893 100644
--- a/stylesheets/commons/Mainpage.scss
+++ b/stylesheets/commons/Mainpage.scss
@@ -691,7 +691,7 @@ div.match-countdown-wrapper {
 	width: calc( 50% + 18px );
 }
 
-.infobox_matches_content .has-matchpage .match-countdown-wrapper .btn-secondary {
+.infobox_matches_content .has-matchpage .match-countdown-wrapper .button--secondary {
 	min-height: 1.5rem;
 	padding: 0 0.75rem;
 }
diff --git a/stylesheets/commons/Match.scss b/stylesheets/commons/Match.scss
index 50196421783..9b4d32c0d68 100644
--- a/stylesheets/commons/Match.scss
+++ b/stylesheets/commons/Match.scss
@@ -243,7 +243,7 @@ $team-icon-size: 22px;
 				flex: 1;
 			}
 
-			& .btn {
+			& .button {
 				width: 100%;
 			}
 
@@ -272,7 +272,7 @@ $team-icon-size: 22px;
 			background-color: var( --clr-on-surface-dark-primary-8 );
 		}
 
-		.btn {
+		.button {
 			.theme--light & {
 				background-color: var( --clr-secondary-100 );
 			}