Question

I want to create a button that looks as if it rises as you hover over it. I’m currently using boxshadow to create the visual look of the raised button. Unfortunately, as would probably be expected, the shadow doesn’t capture the hover events, which causes the button to behave wildly as you approach it from the bottom.

Here’s my less code:

.button-new {
  background-color: lighten(@gray, 10%);
  padding: 10px 20px;
  .border-radius(8px);
  color: white !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  @shadow: 0 4px 0 rgb(183,183,183);
  .box-shadow(@shadow);
  position: relative;
  &:hover {
    top: -8px;
    @shadow: 0 4px 0 rgb(183,183,183), 0 12px 0 rgba(0,0,0,.1);
    .box-shadow(@shadow);
  }
  &:active {
    top: 0;
    @shadow: 0 4px 0 rgb(183,183,183);
    .box-shadow(@shadow);
  }
}

Is there a way to capture hover events over a css box shadow? Or is there a better way to code the button class I want?

Answer 1

The only workaround is to wrap an element around it and use that to grab hover events and target the .button-new ..

something like this

.button-wrap:hover .button-new{
    top: -8px;
    @shadow: 0 4px 0 rgb(183,183,183), 0 12px 0 rgba(0,0,0,.1);
    .box-shadow(@shadow);
}

Demo at http://jsfiddle.net/gaby/jSJTS/2/
(more css properties have been changed, adjust according to your design..)