CSS: create Material Design Schatten Ausgabe

Question

Ich brauche diese Schaltfläche mit CSS nur zu erstellen und ein Problem mit Box Schatten haben. Es gibt zwei verschiedene Schatten auf diesem Knopf: einen gelben, einen schwarzen. Die maximale, was ich bekommen, ist dies

.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>

ist hier result. Gibt es eine andere Lösung, um dieses Ergebnis zu erhalten?

Answer 1

versuchen, auf diese Option, wenn u es auf Chrom moz oder Safari sehen kippe

.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); 
} 

Hoffnung diese funktioniert :)

Answer 2

Ist das, was Sie wollen?

.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

Generell Material Knöpfe würde in etwa so aussehen, aber ich weiß nicht wirklich, was Sie fragen.

.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>