为悬停按钮 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>