html按钮设计更改颜色

--------在htmlbody部分设置了三个按钮
<div class="button-container">
    <button id="button1" onclick="toggleFontSize('jcr', '#button1')" class="button red Position1">JCR</button>
    <button id="button2" onclick="toggleFontSize('cas','#')" class="button green Position2">CAS</button>
    <button id="button3" onclick="toggleFontSize('imp', '.#button3')" class="button yellow Position3">IMP</button>
  </div>
<style>
  .button {
    color: white;
    border: none;
    padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    transition: background-color 0.3s;
  }
  .red {
  background-color: red;
  }
  .green {
  background-color: #00cc00;
  }
  .yellow {
  background-color: hsl(81, 77%, 47%);
 }
 .Position1 {
      position: fixed;
      z-index: 9999;
      top: 1em;
      left: 2em;
  }
  .Position2 {
      position: fixed;
      z-index: 9999;
      top: 1em;
      left: 8em;
  }
  .Position3 {
      position: fixed;
      z-index: 9999;
      top: 1em;
      left: 14em;
  }
 .button.red.Position1.active{
   background-color: hsl(245, 64%, 43%);
   color: purple;
 }
</style>

span.hidden.jcr {
    font-size: 90%;
}
/* 中科院分区 */
span.hidden.cas {
    font-size: 90%;
}
/* 影响因子 */
span.hidden.imp {
    font-size: 90%;
}

```javascript
  var  initialFontSize= {};
   // Define a variable that stores the initial font size of the selected element
  function toggleFontSize(className,buttonname) 
  {  var elements = document.querySelectorAll(".hidden." + className);
     const button = document.querySelectorAll(buttonname);
    
     if ( !initialFontSize[className]) {
    initialFontSize[className] = window.getComputedStyle(elements[0], null).getPropertyValue("font-size");
}
  
    for (var i = 0; i < elements.length; i++) { 
    
        if(elements[i].style.fontSize === initialFontSize[className])
         { elements[i].style.fontSize = "0%"; 
           button.classList.toggle('active') }
         else  
         { elements[i].style.fontSize = initialFontSize[className];
           button.classList.remove('avtive')};
}
} 
只是想通过三个按钮对三种字体进行修改，初始值和0，但是按钮按下去并没有反应，无法通过button.classList.toggle('active') 来更改颜色

代码没贴完整么

这个问题的回答你可以参考下: https://ask.csdn.net/questions/7520063
这篇博客也不错, 你可以看下html滑动开关按钮实现
除此之外, 这篇博客: html课后笔记中的 响应式布局 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
可以做一套网站让pc和手机通吃。
核心：通过获取屏幕的分辨率来改变css的大小（媒体查询）
您还可以看一下秦寒老师的html简介课程中的单双标签和包含并列关系小节, 巩固相关知识点
以下回答由chatgpt基于相关博客总结生成:
对于按钮的设计，可以使用HTML中的
其中，id属性用于标识该按钮，方便后续的样式和事件操作。
接下来，可以使用CSS来定义该按钮的颜色和点击后的效果。例如，将按钮初始颜色设置为浅蓝色，点击后变为深蓝色，可以这样写：
myButton {
background-color: #3fa7d6; color: white; border: none; padding: 10px 20px; font-size: 16px; }
myButton:hover {
background-color: #0c89b7; cursor: pointer; }
myButton:active {
background-color: #0a6e8c; }
上述代码中，#myButton表示对id为myButton的按钮进行样式定义，其中hover和active是CSS中的伪类，表示鼠标悬停和按下的状态，对它们进行不同的颜色定义，从而实现点击后按钮颜色变化的效果。
最后，可以使用JavaScript来为按钮添加点击事件，例如将点击后弹出提示框：
document.getElementById("myButton").addEventListener("click", function() { alert("你点击了按钮"); });
将上述三部分代码结合在一起，即可实现在HTML中设计按钮，并且让它在点击后更改颜色的功能。完整代码示例如下：

html按钮设计更改颜色

myButton {

myButton:hover {

myButton:active {