#2 - Button文字换起来！ (CSS: 移动位置)

Day 1 介绍了用CSS 伪元素的方式放大缩小变宽去做连结特效。传送门
今天也选了几个button的特效，使用位移的方式，简单使用CSS特性就可以。

先来看看成果！

1.换字效果	2.箭头按钮	3.发光按钮

全部的button 基本设定：

button{
  position: relative;
  cursor: pointer;
  border: 0;
  padding:0;
  background: $bg; //SCSS 自定义颜色：#16A085
  vertical-align: middle;
  display: flex;
  margin-bottom: 20px;
  width: 210px;
  height: 45px;
  line-height: 45px;
  border-radius: 45px;
  transition: 0.3s;
  
  &:before, &:after {
    content: ''; 
    position: absolute; 
    transition:.3s; 
  }
}

提案1：换字按钮超活泼

使用：CSS( transition & 伪元素、top)
原理：移动位置

因为伪元素全部下了position:absolute 一开始先让他位置下移一点，然後背景颜色隐藏。等到hover时候再让他现身～

直接上code :

//html
<button class="btn1" data-content="Click Me!">
Learn More</button>

//SCSS
.btn1{
  justify-content: center;
  &:before{
    content:attr(data-content);
    width: 100%;
    top: 50%; //让他在button的下方
    color: transparent; //先让他隐藏
  }
  &:hover{
    color: transparent;
    &:before{
      top: 0; //hover後往上跑
      color: $color; //往上跑的瞬间现出原形！
    }
  }
}

提案2. 箭头按钮指起来

使用：CSS( transition & 伪元素、transform)
原理：移动位置

网路上看到很喜欢的一个Hover按钮，研究了一下做出我的版本～其实也是伪元素移动位置就可以做到！只是位置要稍微计算一下。

首先是HTML的部分，其实就是button里面需要：

用span行内元素做一个球
里面再包一个hover後会出现的箭头的尾巴先隐藏
用border-top和right旋转做的箭头
然後是字。

用span行内元素就可以排成一排，不用flex了。（但因为其他button需要我还是有下～）

//html
<button class="btn2">
  <span class="round">
    <span class="arrow"></span>
  </span>
  <span class="text">Learn More</span>
</button>

CSS的部分，球的直径和button的宽度要一样，才可以让他好像是一体的样子。所有要素的变化：

球 hover後→变宽（width: 100%）
箭头 hover後→ 往右边移
箭头的尾巴（隐藏） hover後→ 出现
然後是字 hover後→ 换颜色

上code! 按照我喜欢的方式，会把注解和说明直接写在里面～

//html
<button class="btn2">
  <span class="round">
    <span class="arrow"></span>
  </span>
  <span class="text">Learn More</span>
</button>

//SCSS
.btn2{ 
  span{
    line-height: $round-width;
		//line-height跟按钮宽度一样的话，文字就会上下置中了～
    transition: 0.35s;
    
		//球球的样式
    &.round{
      width: $round-width;
      height: $round-width;
      border-radius: $round-width; 
//radius本来下50%, 但hover後会变很怪，因为长度已经变了
//所以直接用数字写死
      background-color: $color;

			//箭头尾巴
      .arrow{
        width: 20px;
        height: 3px;
        background: transparent; //先隐藏
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateX(-50%);
//top50%後再变形-50%往上推回自己宽度的一半，就是置中啦

				//箭头用伪元素做
        &:before{
          content: ''; 
          position: absolute; 
          transition:.3s;
          top: -193%; //这个top是我慢慢对的，才会跟尾巴合体
          left: 0px;
          width: 10px;
          height: 10px;
					//用border做出右上括弧的样子再旋转变成箭头
          border-top: solid 3px $bg;
          border-right: solid 3px $bg;
          transform: rotate(45deg);
        }
      }
    }
      
    &.text{
      position:absolute;
      top:0;
      left: calc(#{$round-width} + 10px);
			//让文字往右边推一个球直径的距离再多一点
			//#{}是SCSS安插变数的写法
      transition: 0.5s;
      }  
  }
  
//hover来罗！
  &:hover{
    .round{
    width: 100%;
		//hover後就让球球跟button一样宽
      
      .arrow{
        background: $bg;//让箭头尾巴现身
        left: 30px;//现身的同时再往右边推一点
        
          &:before{
            left: 8px;//箭头也往右边推一点，才有向右的动态
         }
        }
      }
    .text{
      color: $bg;//让文字换个颜色
    }
  }
}

这一个button 花了我一些时间，主要是不知道什麽要素要用什麽样的位置安排。
用position: absolute就快很多！

成品我很喜欢～

提案3. 发光按钮 (Animation)

使用：CSS(background position)
原理：背景移动位置

这个其实也可以使用为元素移动位置做，但发光的物体用渐层会更细致。

然後也藉机进入下一个重点～CSS的主菜：Animation

button虽然可以直接hover让背景换位置就好，但当你滑鼠移开时，光线又会反方向刷回去，实在没有很好看～所以直接使用Animation让他永远是从左边往右边刷过去～

//html
<button class="btn3">Learn More</button>

//scss
.btn3{
  justify-content: center;
  background: linear-gradient(97deg, rgba(22,160,133,1) 0%, rgba(243,199,83,1) 31%, rgba(22,160,133,1) 81%);
  background-position: 125%;
	//调整到我想要光线出现的位置再往左边让他看不到
  background-size: 200% auto;
	//背景大小2倍才好移动位置～
  
    &:hover {
      animation: shine 2s infinite;
			//hover後马上上名称为“shine”的animation~
		}
}

//动画在这里啦
@keyframes shine {
  to {
    background-position: -70%;
		//调整到我想要光线结束的地方
  }
}