当鼠标悬停在按钮上方时，如何使按钮具有弹出效果以及边框具有白色阴影

Question

Functionality:

The Button should have the following effect when user hover above the button:

• The Button should have a pop-up effect.
• The Button border should have white shadow effect.

What has been done:

I have made use of

img:hover{
            border-color: white;
        }

to try to get the effect of the a border shadow of white.

Issue:

I can't really seem to get the said effect. However, I was able to get the effect such as this :

img:hover{
            background-color: white;
        }

when user hover above the button.

Hence, how am I able to create the css such that when user hover above the button, it will create the said effect.

Thanks.

 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

Here's a link that can help you.

http://ianlunn.github.io/Hover/

this page has a collection of over effects.

Answer 2

If you want just to grow up your button you should use transfrom it allow you to scale your button

 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> 

EDIT: another way if you have img not text

 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> 

Answer 3

Example of padding....

 button{ transition: padding 1s; } button:hover { box-shadow: 0px 5px 5px #888888; padding:15px; } 

 <button><img src="#"/></button> 

Transition is used to give the button an animated stretch and box-shadow for the pop-out effect. This is just a quick example mainly to focus on the padding.

I'm sure you can expand on this applying more styles to fit your needs. Any questions please leave a comment below and I will get back to you as soon as possible.

I hope this helps. Happy coding!