为悬停的按钮CSS添加边框

Question

当按钮悬停时，我想在按钮上添加边框。在我的代码下面：

    button{
    background-color: #e876f5;
    font-size: 20px;
    color: white;
    border-radius: 3px;
  }

  button:focus{
    outline: none;
  }

  button:hover{
    background-color: white;
    border: 2px solid #e876f5;
    color:  #e876f5;
    cursor: pointer;
  }

我认为添加border: 2px solid #e876f5;就足够了，但是当我将鼠标悬停在按钮上时没有边框。我该怎么办？

Answer 1

首先添加边框，然后将鼠标悬停在边框上。

   button{
    background-color: #e876f5;
    font-size: 20px;
    color: white;
    border-radius: 3px;
    border:2px solid #e876f5;/* add normal button css */
  }

  button{
    background-color: #e876f5;
    font-size: 20px;
    color: white;
    border-radius: 3px;
    border:2px solid #e876f5;
  }

  button:focus{
    outline: none;
  }

  button:hover{
    background-color: white;
    border: 2px solid #e876f5;
    color:  #e876f5;
    cursor: pointer;
  }

<button>Button</button>