Text Schatten in transluzenten div

Question

Ich habe diese Test-Taste (Code-Schnipsel für mousedown Verhalten ausführen). Ich möchte, dass der Text auch einen Schatten "unter" seinem Elternteil hat div (als ob es eine Bitmap mit Deckkraft wäre). Irgendeine Syggestion?

$(document).ready(function() { 
 
     $('#button').on ('mousedown', function() { 
 
      $(this).removeClass ('normal').addClass ('pressed') ; 
 
     }); 
 
     $('#button').on ('mouseup', function() { 
 
      $(this).removeClass ('pressed').addClass ('normal') ; 
 
     }); 
 
    });

html, body, .allofit { 
 
    width:100%; 
 
    height:100%; 
 
    margin: 0; 
 
} 
 
    .allofit { 
 
    display: flex; 
 
} 
 

 
.centered { 
 
    margin:auto; 
 
    text-align: center; 
 
    border: 1px solid #444; 
 
    border-radius: 10px; 
 
    vertical-align: middle; 
 
    display: flex; 
 
} 
 

 
.normal { 
 
    width: 50%; 
 
    height: 50%; 
 
    background-color: rgba(128,255,160,0.6); 
 
    filter: drop-shadow(15px 15px 8px rgba(40, 80, 40, 0.8)); 
 
    -webkit-filter: drop-shadow(15px 15px 8px rgba(70,130,70,0.8)); 
 
    opacity: 80; 
 
    padding: 0; 
 
} 
 

 
.pressed { 
 
    width: calc(50% - 2px); 
 
    height: calc(50% - 2px); 
 
    padding:2px 0 0 2px; 
 
    background-color: rgba(128,255,160,0.6); 
 
    filter: drop-shadow(8px 8px 4px rgba(40, 80, 40, 0.8)); 
 
    -webkit-filter: drop-shadow(8px 8px 4px rgba(70,130,70,0.8)); 
 
    opacity: 80; 
 
} 
 

 
.label { 
 
    margin:auto; 
 
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
 
    font-size:30pt; 
 
    font-weight:900; 
 
} 
 

 
.noselect { 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
     -moz-user-select: none; 
 
     -ms-user-select: none; 
 
      user-select: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div class="allofit"> 
 
     <div id="button" class="centered normal"> 
 
      <div class="label noselect">Click Me</div> 
 
     </div> 
 
    </div>

Answer 1

Dank @GCyrillus Ich habe es wie erwartet zu funktionieren. Lösung folgt hier für die Aufzeichnung.

$(document).ready(function() { 
 
     $('#button').on ('mousedown', function() { 
 
      $(this).removeClass ('normal').addClass ('pressed') ; 
 
      $('#label').removeClass ('normalText').addClass('pressedText'); 
 
     }); 
 
     $('#button').on ('mouseup', function() { 
 
      $(this).removeClass ('pressed').addClass ('normal') ; 
 
      $('#label').removeClass ('pressedText').addClass('normalText'); 
 
     }); 
 
    });

html, body, .allofit { 
 
    width:100%; 
 
    height:100%; 
 
    margin: 0; 
 
} 
 
    .allofit { 
 
    display: flex; 
 
} 
 

 
.centered { 
 
    margin:auto; 
 
    text-align: center; 
 
    border: 1px solid #4a4; 
 
    border-radius: 10px; 
 
    vertical-align: middle; 
 
    display: flex; 
 
} 
 

 
.normal { 
 
    width: 50%; 
 
    height: 50%; 
 
    background-color: rgba(128,255,160,0.6); 
 
    filter: drop-shadow(15px 15px 8px rgba(40, 80, 40, 0.8)); 
 
    -webkit-filter: drop-shadow(15px 15px 8px rgba(70,130,70,0.8)); 
 
    opacity: 80; 
 
    padding: 0; 
 
} 
 

 
.normalText { 
 
    text-shadow: 12px 12px 6px #8a8; 
 
} 
 

 
.pressed { 
 
    width: calc(50% - 2px); 
 
    height: calc(50% - 2px); 
 
    padding:2px 0 0 2px; 
 
    background-color: rgba(128,255,160,0.6); 
 
    filter: drop-shadow(8px 8px 4px rgba(40, 80, 40, 0.8)); 
 
    -webkit-filter: drop-shadow(8px 8px 4px rgba(70,130,70,0.8)); 
 
    opacity: 80; 
 
} 
 

 
.pressedText { 
 
    text-shadow: 6px 6px 3px #686; 
 
} 
 

 
.label { 
 
    margin:auto; 
 
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
 
    font-size:30pt; 
 
    font-weight:900; 
 
} 
 

 
.noselect { 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
     -moz-user-select: none; 
 
     -ms-user-select: none; 
 
      user-select: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div class="allofit"> 
 
     <div id="button" class="centered normal"> 
 
      <div id="label" class="label noselect normalText">Click Me</div> 
 
     </div> 
 
    </div>