mysterious shadow cast from an undetermined altitude

Question

mysterious shadow cast from an undetermined altitude

Currently experimenting with creating a sliding effect background using box-shadows. Everything seems to be working smoothly, although the challenge lies in utilizing percentage units which aren't supported by box-shadow, requiring manual configuration in pixels.

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/
Curious if there's an alternative method to ensure the box shadow matches the height of the element. I do have another solution in mind but it's more complex to implement, so I'm open to suggestions. Thanks for any assistance!

html css

Answer 1

Answer №1

One effective approach is to utilize a pseudo-element and encompass the text within a <span> element. Although it involves a little more code, the process is not overly complicated. Here is an illustration:

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>

Answer 2

One effective approach is to utilize a pseudo-element and encompass the text within a <span> element. Although it involves a little more code, the process is not overly complicated. Here is an illustration:

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>

Answer 3

Answer №2

An effective method, which does not rely on JavaScript, involves adjusting the box-shadow height to match or exceed that of the tallest element.

Below is an example in 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>

The corresponding CSS code looks like this:

.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 greater height
    box-shadow: inset 0 180px 0 0 rgb(3, 54, 110);
    color:rgb(222, 222, 222);
}

// Adjusting heights of buttons individually
#play-game { height: 100px; }
#play-game-2 { height: 140px; }
#play-game-3 { height: 180px; }

Answer 4

An effective method, which does not rely on JavaScript, involves adjusting the box-shadow height to match or exceed that of the tallest element.

Below is an example in 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>

The corresponding CSS code looks like this:

.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 greater height
    box-shadow: inset 0 180px 0 0 rgb(3, 54, 110);
    color:rgb(222, 222, 222);
}

// Adjusting heights of buttons individually
#play-game { height: 100px; }
#play-game-2 { height: 140px; }
#play-game-3 { height: 180px; }

mysterious shadow cast from an undetermined altitude

Answer №1

Answer №2

Similar questions

Adjust the width of the <li> element based on the quantity of its children

Activating the submit button only following confirmation that the image dimensions have been verified

Combine two FontAwesome icons in a stacked manner

Different sized image grid display

Having trouble setting the focus on a text box following a custom popup

Employing JavaScript to insert a JSON value as a parameter in an HTML element's attribute

The header is not displaying the background image as intended

Footer sidebar of Material Dashboard 2 (free edition) from Innovative Schedule

When HTTP 304 meets the Cache-Control directive with a value of no-cache

Display fixed information in a separate tab using express and ejs

Trouble with the alignment of Bootstrap grid columns

Ways to retrieve targeted keyframes using JavaScript

Distance between cursor and the conclusion of the text (autofocus)

Perl Tool: HTML::PrettyPrinter - Managing Tags with Self-Closing Feature

Ways to display an icon upon hovering or clicking, then conceal it when the mouse is moved away or another list item is clicked using ngFor in Angular 7

The layout of HTML emails appears to be malfunctioning on Outlook

Issue with Attaching Click Event to Dynamic Div Elements

The automatic sliding feature stops functioning once the controls have been clicked

How can I load a URL without causing a page refresh?

Create geometric shapes on Google Maps version 2