<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}
.indicators button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
color: grey;
}
.CLOCK:hover .C1 button {
color: black;
transform: scale(1.1);
transition: 0.5s ease-in;
}
.CLOCK:hover .C2 button{
color: grey;
border-bottom: 0.2rem solid;
}
.WEATHER:hover .W1 button {
color: black;
transform: scale(1.1) ;
transition: 0.5s ease-in;
}
.WEATHER:hover .W2 button{
color: grey;
border-bottom: 0.2rem solid;
}
.CALENDAR:hover .CA1 button {
color: black;
transform: scale(1.1);
transition: 0.5s ease-in;
}
.CALENDAR:hover .CA2 button{
color: grey;
border-bottom: 0.2rem solid;
}
.CLOCK .C1 button.actives{
color: green;
transform: none;
transition: none;
}
.CLOCK .C2 button.active{
color: green;
border-bottom: 0.2rem solid;
}
.WEATHER .W1 button.actives {
color: blue;
transform: none;
transition: none;
}
.WEATHER .W2 button.active{
color: blue;
border-bottom: 0.2rem solid;
}
.CALENDAR .CA1 button.actives {
color: red;
transform: none;
transition: none;
}
.CALENDAR .CA2 button.active{
color: red;
border-bottom: 0.2rem solid;
}
</style>
</head>
<body>
<div class="indicators" id="navbar">
<div class="CLOCK">
<div class="C1"> <button class="img actives">LOGO1</button> </div>
<div class="C2"> <button class="btn active">CLOCK</button> </div>
</div>
<div class="WEATHER">
<div class="W1"> <button class="img">LOGO2</button> </div>
<div class="W2"> <button class="btn">WEATHER</button> </div>
</div>
<div class="CALENDAR">
<div class="CA1"> <button class="img">LOGO3</button> </div>
<div class="CA2"> <button class="btn">CALENDAR</button> </div>
</div>
<script>
var btnContainer = document.getElementById("navbar");
var btns = btnContainer.getElementsByClassName("btn");
var imgs = btnContainer.getElementsByClassName("img");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function nt() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active");
this.className += " active";
})
imgs[i].addEventListener('click', function mb() {
var current = document.getElementsByClassName("actives");
current[0].className = current[0].className.replace(" actives");
this.className += " actives";
})
}
</script>
</body>
</html>