javascript - 鼠标悬停在按钮上方时，如何使按钮弹出效果和边框有白色阴影

Question

功能:

当用户将鼠标悬停在按钮上方时，按钮应具有以下效果:

• Button 应该有弹出效果。
• 按钮边框应该有白色阴影效果。

做了什么:

我用过

img:hover{
            border-color: white;
        }

尝试得到白色边框阴影的效果。

问题:

我似乎真的无法达到所说的效果。但是，我能够得到这样的效果:

img:hover{
            background-color: white;
        }

当用户悬停在按钮上方时。

因此，我如何创建 css，以便当用户将鼠标悬停在按钮上方时，它会产生上述效果。

谢谢。

img:hover {
  border-color: white;
}
#Button1 {
  position: absolute;
  top: 310px;
  left: 1550px;
  outline: 0px;
  z-index: 2;
  border: 0;
  background: transparent;
}

<button id="Button1" onclick="GreatLoveInSingapore()">
  <img src="lib/img/GreatLoveButton.png">
</button>

Answer 1

如果你只想增大你的按钮，你应该使用 transfrom 它允许你缩放你的按钮

div{
  margin: 50px 200px;
}
button{
  border: 0;
  padding: 0;
  cursor: pointer
}
img {
  height: 100px;
  width: 100px;
  display: block;
  transition: 0.7s;
}
img:hover{
   transform: scale(1.2);
}

<div>
  <button class="container">
    <img src="http://i.imgur.com/IMiabf0.jpg">
  </button>
</div>

编辑:另一种方式，如果你有 img 而不是文本

div.container {
  text-align: center;
  margin: 100px auto 0;
}

a {
  display: inline-block;
  background-color: #1984c3;
  color: #fff;
  font-size: 1.5em;
  font-family: 'Calibri', sans-serif;
  font-weight: lighter;
  padding: 1em 2em;
  text-decoration: none;
  text-transform: uppercase;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.1s;
}
a:hover{
   transform: scale(1.2);
}

<div class="container">
  <a href="#">Hi Im a Button</a>
</div>