<button class="btn1"> 按钮</button> 

<button class="btn2"> 按钮</button> 

​

<button class="btn2 hover"> 按钮</button> 

​

<button class="btn1 disable"> 按钮</button>

​

<button class="btn1 ">  <span>按钮  </span></button>

.btn1{

  background:green;

  color:white;

   padding:20px 70px;

  font-size:24px;

}

​

.btn2{

  border:1px solid green;

  background:white;

  color:green;

   padding:20px 70px;

  font-size:24px;

  font-weight:bold;

}

​

.hover:hover{

  background:green;

  color:white;

​

}

​

.disable{

  opacity:0.5;

  cursor:not-allowed;

}

​

​

​

.btn1 span:after{

  content:">>";

  opacity:0;

  right:-20px;

  position:abosolute;

  transition:1s;

}

​

.btn1:hover span:after{

  content:">>";

  opacity:1;

  right:0px;

}