CSS 仅过渡背景 colored颜色

发布于12月16日

我有一个按钮，当它是hovered和clicked时，需要转换它的 colored颜色 .单击时，我为其添加一个名为.selected的类名.

将转换属性设置为按钮会使每个无意的样式转换.

.score-button {
  width: 35px;
  height: 35px;
  border: 1px solid var(--fill-button-text8);
  background-color: transparent;
  border-radius: 23px;
  color: var(--fill-button-text8);
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  transition: linear 0.5s;

  &:hover {
    background-color: var(--fill-button-bg-hover);
  }

  &.selected {
    border: none;
    background-color: var(--primary-color);
    color: var(--fill-button-text);
  }
}

推荐答案

您可以specify a property来过渡:

transition: background-color linear 0.5s; 个

.score-button {
    width: 35px;
    height: 35px;
    border: none;
    border: 1px solid var(--fill-button-text8);
    background-color: transparent;
    border-radius: 23px;
    color: var(--fill-button-text8);
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    transition: background-color linear 0.5s;

    &:hover {
      background-color: var(--fill-button-bg-hover);
    }

    &.selected {
      border: none;
      background-color: var(--primary-color);
      color: var(--fill-button-text);
    }
}

Css相关问答推荐

Nuxt 3+sass：不能将包含路径与@IMPORT和@USE一起使用

包含 N 个 React 组件的砌体网格

CSS 仅过渡背景 colored颜色

推荐答案

Css相关问答推荐

Nuxt 3+sass：不能将包含路径与@IMPORT和@USE一起使用

包含 N 个 React 组件的砌体网格

解释 "document.styleSheets[0].cssRules[0].style;"

使用任意运行时字符串进行 Tailwind CSS 类定位

为什么同一个 CSS 类连续出现两次

Material UI Modal 因背景而变暗

如何在真实文本旁边制作文本阴影，使其看起来像 css 中的重复文本？

CSS网格使sibling 项目拉伸

子组件的css会影响整个页面

Ant Design：将位置子菜单移动到屏幕顶部

我怎样才能在某些区域制作一个单独的文本行，而在其他区域制作一个实心填充？

使用 HTML 和 CSS 滚动表格

中心表单提交按钮 HTML / CSS

是否可以删除悬停在链接上时出现的手形光标？ (或将其设置为普通指针)

如何动态生成用逗号分隔的类列表？

如何将 bootstrap 列高设为 100% 行高？

Select 标签的占位符

CSS：悬停一个元素，多个元素的效果？

Rails 中正确的 SCSS assets资源 struct

行高百分比不起作用