CSS: Styling Buttons with Hover and Active States - card-info-btn

Here's the updated CSS code with the requested styles to enhance the buttons with the class 'card-info-btn':

.card-inner {
  /* border: 1px solid blue; */
  height: 21vh;
  background: #ffffff;
  padding: 0 0 30px 0;
  .item-header {
    display: flex;
    justify-content: space-between;
    .card-inner-title {
      flex: 1 1 auto;
      margin-left: 20px;
      margin-bottom: 30px;
    }
    .card-info-type {
      flex: 0 0 200px;
      list-style: none;
      .card-info-btn {
        display: inline-block;
        width: 50px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
        margin: 0 1px;
        border: 1px solid #cccccc;
        transition: border-color 0.3s;
      }
      .card-info-btn:hover {
        border-color: blue;
      }
      .card-info-btn.active {
        background-color: blue;
        color: white;
      }
    }
  }
  .item-info {
    /* border: 1px solid red; */
    display: flex;
    justify-content: space-between;
    .item {
      flex: 1 1 auto;
      text-align: center;
      border-left: 1px solid #cccccc;
      &:first-child {
        border: 0;
      }
      .num {
        font-size: 36px;
        font-weight: bold;
        margin-bottom: 5px;
      }
      .other-num {
        font-size: 18px;
        margin-bottom: 5px;
      }
    }
  }
}

This code implements the following styles:

• Hover Effect: When the mouse hovers over a button with the class 'card-info-btn', the border color changes to blue. The transition: border-color 0.3s; property provides a smooth animation for the border color change.
• Active State: When a button is clicked, the class 'active' is added to it. The .card-info-btn.active rule changes the background color to blue and the text color to white, indicating that the button is active.
• Button Reset: When another button is clicked, the 'active' class is removed from the previously active button, restoring its original appearance.

This styling approach enhances the user experience by providing clear visual feedback for button interactions.