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>

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>

• javascript
• html
• css

• what do you exactly mean by popup effect? (shall it shrink and get to normal size during click procesS?) – Deepak Yadav Commented Jan 4, 2016 at 7:17
• @DeepakYadav Popup effect- grow – Luke Commented Jan 4, 2016 at 7:28
• Not sure what you are looking for but you can use something like box-shadow property to get similar effect. See this – abhishekkannojia Commented Jan 4, 2016 at 7:32
• @abhishekkannojia understood on the box shadow, but how do you make the button grow when you hover above it? – Luke Commented Jan 4, 2016 at 7:37
• To make the button bigger you can add more padding I think it would be a better option than height or width – NewToJS Commented Jan 4, 2016 at 7:38

2 Answers 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./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>

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 ment below and I will get back to you as soon as possible.

I hope this helps. Happy coding!