CSS：材料設計の影の問題を作成

Question

私はCSSでこのボタンを作成し、ボックスシャドウの問題を持っている必要があります。このボタンには、黄色と黒の2つの異なる影があります。私は何を得るの最大は、ここでは、この

.button { 
 
    height: 81px; 
 
    width: 250px; 
 
    text-align: center; 
 
    font-family: 'Celias_Medium', 'Open Sans:500', sans-serif; 
 
    font-size: 11px; 
 
    line-height: 3.3; 
 
    letter-spacing: 0.4px; 
 
    cursor: pointer; 
 
    outline: none; 
 
    display: block; 
 
    vertical-align: top; 
 
    padding: 23px 0 26px 0; 
 
    text-transform: uppercase; 
 
    color: #000000; 
 
    background-color: #fbfb5c; 
 
    box-shadow: 0 20px 90px -30px rgba(251, 251, 92, 0.9), 0 40px 90px -50px rgba(0, 0, 0, 0.5) 
 
}

<div class="button">ADD 7 Activities</div>

あるresultです。この結果を得るための他の解決方法はありますか？

Answer 1

この試着uはクロムMOZやサファリにそれを参照してくださいカント場合

.button { 
    height: 81px; 
    width: 250px; 
    text-align: center; 
    font-family: 'Celias_Medium', 'Open Sans:500', sans-serif; 
    font-size: 11px; 
    line-height: 3.3; 
    letter-spacing: 0.4px; 
    cursor: pointer; 
    outline: none; 
    display: block; 
    vertical-align: top; 
    padding: 23px 0 26px 0; 
    text-transform: uppercase; 
    color: #000000; 
    background-color: #fbfb5c; 
    box-shadow: 0 20px 90px -30px rgba(251, 251, 92, 0.9), 0 40px 90px -50px rgba(0, 0, 0, 0.5); 
    -moz-box-shadow: 0 20px 90px -30px rgba(251, 251, 92, 0.9), 0 40px 90px -50px rgba(0, 0, 0, 0.5); 
    -webkit-box-shadow: 0 20px 90px -30px rgba(251, 251, 92, 0.9), 0 40px 90px -50px rgba(0, 0, 0, 0.5); 
} 

この1つは働く希望:)

Answer 2

は何をしたいということですか？

.button { 
 
     height: 81px; 
 
     width: 250px; 
 
     text-align: center; 
 
     font-family: 'Celias_Medium', 'Open Sans:500', sans-serif; 
 
     font-size: 11px; 
 
     line-height: 3.3; 
 
     letter-spacing: 0.4px; 
 
     cursor: pointer; 
 
     outline: none; 
 
     display: block; 
 
     vertical-align: top; 
 
     padding: 23px 0 26px 0; 
 
     box-sizing: border-box; 
 
     text-transform: uppercase; 
 
     color: #000000; 
 
     background-color: #fbfb5c; 
 
     box-shadow: 1px 1px 70px -24px; 
 
    }

<div class="button"> 
 
    ADD y activities 
 
</div>

Answer 3

一般的に材料のボタンは、次のようになりますが、私は本当にあなたが求めているのか分かりません。

.button { 
 
    height: 81px; 
 
    width: 250px; 
 
    text-align: center; 
 
    font-family: Celias_Medium, 'Open Sans:500', sans-serif; 
 
    font-size: 11px; 
 
    line-height: 3.3; 
 
    letter-spacing: .4px; 
 
    cursor: pointer; 
 
    vertical-align: top; 
 
    padding: 23px 0 26px; 
 
    box-sizing: border-box; 
 
    text-transform: uppercase; 
 
    background-color: #fbfb5c; 
 
    border-radius: 4px; 
 
    margin: 16px 0; 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); 
 
    transition: all .3s cubic-bezier(.25, .8, .25, 1) 
 
} 
 
.button:hover { 
 
    box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22) 
 
}

<div class="button"> 
 
    Button no. 1 
 
</div> 
 
<div class="button"> 
 
    Button no. 2 
 
</div> 
 
<div class="button"> 
 
    Button no. 3 
 
</div> 
 
<div class="button"> 
 
    Button no. 4 
 
</div> 
 
<div class="button"> 
 
    Button no. 5 
 
</div>