title: Text shadow in translucent div
body: <p>I have this test button ( <kbd>run code snippet</kbd> for <code>mousedown</code> behaviour). 
  I would like the text to also have some shadow 'beneath' its parent <code>div</code> (as if it were a bitmap with opacity).  Any syggestion?</p>
  
  <p><a href="https://i.stack.imgur.com/NkCvg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NkCvg.png" alt="Come on, click me!"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  $( document ).ready(function() {
        $('#button').on ( 'mousedown', function () {
            $(this).removeClass ('normal').addClass ( 'pressed' ) ;
        } );
        $('#button').on ( 'mouseup', function () {
            $(this).removeClass ('pressed').addClass ( 'normal' ) ;
        } );
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;div class="allofit"&gt;
          &lt;div id="button" class="centered normal"&gt;
              &lt;div class="label noselect"&gt;Click Me&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>