CODEWITHSUNDEEP
htmlcss
Wowsk
Wowsk

Reputation: 3675

box-shadow with unknown height

I am trying to create a sliding effect background and am trying to use box-shadows to create the effect. It works fine, but since box-shadow can not use percentage units I am having to set the amount manually with pixel units.

HTML: 

<button id="play-game">Play Game!</button>

CSS:

#play-game{
    width:240px;
    height:71px;
    font-size:40px;
    transition: all ease 0.5s, color 0.5s;
    box-shadow: inset 0 0 0 0 rgb(3, 54, 110);
    background:rgb(61, 132, 212);
    border:none;
}
#play-game:hover{
    box-shadow: inset 0 71px 0 0 rgb(3, 54, 110);
    color:rgb(222, 222, 222);
}

http://jsfiddle.net/muycgfwg/
I was wondering if there was any way to make the box shadow the height of the element. I have another way but it is a little bit harder to incorporate, so it is okay if there is none. Thanks for any help!

Upvotes: 3

Views: 693

Answers (2)

llanfair
llanfair

Reputation: 1885

A simple solution, without using JavaScript, is to set the box-shadow height equals or greater than the highest element.

HTML:

<button class="bg-effect" id="play-game">Button test 1!</button>
<button class="bg-effect" id="play-game-2">Button test 2!</button>
<button class="bg-effect" id="play-game-3">Button test 2!</button>

CSS:

.bg-effect{
    width:260px;
    height: 71px;
    font-size:40px;
    transition: all ease 0.5s, color 0.5s;
    box-shadow: inset 0 0 0 0 rgb(3, 54, 110);
    background:rgb(61, 132, 212);
    border:none;
}

.bg-effect:hover{
    // '180px' represents the element with more height
    box-shadow: inset 0 180px 0 0 rgb(3, 54, 110);
    color:rgb(222, 222, 222);
}

// Setting different heights to the buttons
#play-game { height: 100px; }
#play-game-2 { height: 140px; }
#play-game-3 { height: 180px; }

Upvotes: 0

ilia
ilia

Reputation: 329

Best way to do it would be to use a pseudo-element and wrap the writing in a <span>. It's a bit more code, but nothing too complex. Here's an example:

http://jsfiddle.net/muycgfwg/2/

#play-game{
  position: relative;
  font-size: 40px;
  background: rgb(61, 132, 212);
  border: none;
  padding: 10px 20px;
  overflow: hidden;
}

#play-game:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.5;
  transform: translateY(-100%);
  transition: all ease 0.5s;
}

#play-game:hover:after {
  transform: translateY(0);
}

#play-game span {
  position: relative;
  z-index: 10;
  transition: color 0.5s;
}

#play-game:hover span{
  color: rgb(222, 222, 222);
}
<button id="play-game"><span>Play Game!</span></button>

Upvotes: 1

Related Questions