Welcome to the world of Stack Overflow.
One important thing to remember is that the :active pseudo element is only active when a user clicks (mouse-down) on something. Check it out here
The usual approach is to use the css class "active" and define a .active selector for styling any desired element.
In your current setup, the buttons are affected by hover and focus events, causing them to lose focus when clicked outside the button.
To address this issue, you can make some adjustments in both CSS and JavaScript. The modified sections are indicated by /* EDIT */
I do not recommend the last method where I rely on passing the element ID to the function and matching it with the button's class. A better practice would be to have the show function take the JavaScript event as an argument, use event.target to identify the clicked link, and then utilize getElementById based on attributes like data-target="more". This decouples the CSS class from the JavaScript implementation.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Services</title>
</head>
<style>/* Customize Button Size, Border, Background Color, and Alignment */
.services {
width:210px;
height:135px;
padding: 0px;
border:0px;
outline:0px;
cursor: pointer;
color: #999999;
font-size: 20px;
text-align: center;
background: url("https://i.ibb.co/G5mn9nY/Services-Buttons-Combined-Big.png") no-repeat; /* Common background-image for all links */
}
/* Set Button Text Styling for Mouseover and Active States */
/* EDIT */
.services:focus, .services:hover, .services.active {
color: black;
}
/* Position Button Text*/
divtext {
position: relative;
top: 90px;
}
/* Wrapper Div for formatting button areas */
.servicesbuttonwrapper {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
/* Wrapper Div for arranging revealed description text */
.servicestextwrapper {
text-align: left;
margin-left: 100px;
margin-right: 32px;
top: 50px;
position: relative;
}
/* Adjust Image rollover position based on Focus State */
.assets {
background-position: 0 0;
}
/* EDIT */
.assets:focus, .assets:hover, .assets.active {
background-position: 0 -135px;
}
.viz {
background-position: 0 -270px;
}
/* EDIT */
.viz:focus, .viz:hover, .viz.active {
background-position: 0 -405px;
}
.software {
background-position: 0 -540px;
}
/* EDIT */
.software:focus, .software:hover, .software.active {
background-position: 0 -675px;
}
.more {
background-position: 0 -810px;
}
/* EDIT */
.more:focus, .more:hover, .more.active {
background-position: 0 -945px;
}
/* Initially hide button descriptions */
#assets, #viz, #software, #more {
display: none;
}
</style>
<body>
<!--Wrapper div for positioning buttons using CSS-->
<div class="servicesbuttonwrapper">
<!--Base buttons with JavaScript functions for click behavior.-->
<a href="javascript:void(0)" id="defaultstate" onclick="show('software');" class="services software"><divtext>INTERACTIVE SOFTWARE</divtext></a>
<a href="javascript:void(0)" onclick="show('assets');" class="services assets"><divtext>3D ASSET CREATION</divtext></a>
<a href="javascript:void(0)" onclick="show('viz');" class="services viz"><divtext>3D VISUALIZATION</divtext></a>
<a href="javascript:void(0)" onclick="show('more');" class="services more"><divtext>IMAGE CREATION</divtext></a>
</div>
<!--Basic description text.-->
<div class="servicestextwrapper">
<div id="assets">Description for 3D Assets.</div>
<div id="viz">Description for 3D Visualization.</div>
<div id="software">Description for Interactive Software.</div>
<div id="more">Description for Additional Services.</div>
</div>
<!--JavaScript function to show/hide elements upon button press.-->
<script type="text/javascript">
/* EDIT */
function show(elementId) {
document.getElementById("assets").style.display = "none";
document.getElementById("viz").style.display = "none";
document.getElementById("software").style.display = "none";
document.getElementById("more").style.display = "none";
document.getElementById(elementId).style.display = "block";
// get a list of buttons with ".services" class
const buttons = document.querySelectorAll(".services");
for(let button of buttons) {
// remove ".active" class
button.classList.remove("active");
}
// add the active class to the specified button element
document.querySelector("." + elementId).classList.add("active");
}
</script>
<!--JavaScript function to set the first button as focused.-->
<script>
window.onload=function(){
document.getElementById("defaultstate").click();
};
var linkToFocus = document.getElementById('defaultstate');
linkToFocus.focus();
</script>
</body>
</html>