css笔记

按钮hover/active效果

.el-button--confirm,.el-button--confirm:focus:not(.el-button--confirm:hover){
  // 这里不能设置margin,会抖动。
  background-color: #045FE0;
  border-radius: 4px;
  box-sizing: border-box;
  border: 2px solid transparent;
  width: 120px;
  font-size: 14px;
  color: #FFFFFF;
  // 鼠标移上去的效果
  &:hover {
    opacity: 1;
    background: #045FE0;
    border: 2px solid #2F8BFB;
    color: #B9B9B9;
  }
  // 鼠标点击的效果
  &:active {
    opacity: 1;
    background: #004DB9;
    border: 2px solid #2F8BFB;;
    color: #FFFFFF;
  }
}
// 鼠标点击后移开的效果
.el-button--confirm:focus:not(.el-button--confirm:hover){}