画一只动态的皮卡丘（四）

一、创建button按钮

• 1 HTML结构

  <div class="action">
      <button data-speed="slow">慢速</button>   <!-- 自定义属性 -->
      <button data-speed="normal" class="active">中速</button>
      <button data-speed="fast">快速</button>
  </div>
  

  2 设置按钮的一般样式

  .actions{
    position: absolute;
    top: 0;
    right: 0;
    /* border: 1px solid red; */
    display: flex;
    flex-direction: column;
  }
  
  .actions>button{
    margin: 10px;
    padding: 8px 10px;
    background: #ddd;
    border: none;     /*去除默认按钮的 边框样式*/
  }
  

  3 设置被选中按钮的样式

  .actions>button.active{
    box-shadow: 1px 1px 1px rgba(0,0,0,0.8);    /* box-shadow样式*/
  }
  
  /* .actions>button:focus{
    outline: none;}        去除默认按钮的 选中边框颜色
  */