不同方向收合

竹白記事本，學習紀錄，2019/02/25。

Button Hover Effects | Html CSS

tags: 按鈕

CodePen

重點

• transform-origin

原本的狀態與 :hover 狀態 的 transform-origin 方向不同，可以產生動畫收合的方向的變化。

a {
  text-decoration: none;
}

// .button
.button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid black;
  width: 200px;
  height: 50px;
  color: black;
  font-size: 24px;
  text-transform: uppercase;
  
  // 樣式
  &::before, &::after {
    content: '';
    position: absolute;
    top: 0;
    z-index: -1;
    background: black;
    width: 50%;
    height: 100%;
  }
  &::before {
    left: 0;
  }
  &::after {
    left: 50%;
  }
  // 動畫
  &::before, &::after {
    transform: scaleX(0);
    transition: transform 1s; 
  }
  // 動畫方向
  &::before {
    transform-origin: left;
  }  
  &::after {
    transform-origin: right;
  }
  
  // :hover 狀態
  &:hover {
    color: white;
    &::before,&::after {
      transform: scaleX(1);
      transition: transform .5s; 
    }
    // 換方向收回
    &::before {
      transform-origin: right;
    }
    &::after {
      transform-origin: left;
    }
  }
}