# 不同方向收合
[竹白記事本](https://chupainotebook.blogspot.com/2019/02/css-effect.html)，學習紀錄，2019/02/25。

>[Button Hover Effects | Html CSS](https://www.youtube.com/watch?v=CzedjonaEjc)

###### tags: `按鈕`

## CodePen
<iframe height="265" style="width: 100%;" scrolling="no" title="Button Hover Effects | Html CSS" src="//codepen.io/chupai/embed/rRBOpE/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/chupai/pen/rRBOpE/'>Button Hover Effects | Html CSS</a> by Chupai@Design
(<a href='https://codepen.io/chupai'>@chupai</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## 重點
- `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;
    }
  }
}