Solving the problem of material design shadow in CSS

https://i.sstatic.net/C00vv.png

I am trying to create a button using only CSS, but I'm struggling with the box shadow. The button design requires two different shadows: one yellow and one black. So far, I have managed to achieve this:

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

Check out the result here. Are there any alternative solutions to achieving this desired outcome?

htmlcssshadowdropshadow

Answer №1

If you are having trouble viewing this on Chrome, Mozilla, or Safari, give this a try:

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

Fingers crossed that this one does the trick! :)

Answer №2

Are you looking for this specific design?

.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

Typically, material buttons have a design similar to this example, but I'm not sure exactly what you're looking for.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent the Esc key from closing panel in jQuery Mobile

As per the jQuery Mobile documentation: "If you click the link that opened the panel, swipe left or right, or tap the Esc key, the panel will close. By default, panels can also be closed by clicking outside of the panel onto the page contents." Visit t ...

javascriptjquerycssjquery-mobile

The program is unable to identify the function .modal("show") upon adding HTML to the page

I'm currently developing a program that utilizes a click event handler to trigger an ajax request to my node server. The server then generates information within a handlebars partial and sends it back to the client using res.render("partials/scraped-a ...

javascripthtmlnode.jstwitter-bootstrap-4express-handlebars

Where does the compiled CSS for the Avada WordPress theme originate?

We recently made the switch from our old Wordpress e-commerce theme to Avada, and rebuilding everything in Fusion Builder was a breeze. Tweaking with custom CSS has been straightforward as well. However, there is one issue that I just can't figure ou ...

csswoocommercewordpress-theming

Customize HTML styles using Angular Material

I've noticed that my index.html file has a lot of style elements when using Angular Material, and I'm not sure why. Here's an example in the header element where different classes are used for Angular Material components. https://i.sstatic. ...

cssangularjsangular-material

Unable to click on hyperlink and image not adjusting in size

I am having an issue with the anchor tags inside a div. For some reason, the width and height are set to 0px, and I have tried to adjust them with no success. Each dot in my onepage scroller is meant to navigate to a different page. .dotstyle-scaleup{ f ...

htmlcss

What is the best way to stop div animations when clicking with jQuery?

Upon loading the page, a div animates automatically. There is also a button present. When the button is clicked, I would like to create a new div and animate it the same way as the first one. However, when this happens, the position of the first div also ...

javascriptjqueryhtmlcssanimation

Is there a way to input row value directly into my modal?

Is there a way to retrieve the data from the table row where my buttons are located? I attempted using {{row.name}} as a value in my modal, but it doesn't seem to be working. What is the correct method to achieve this? Below is the HTML code for the ...

javascripthtmlhtml-tablebootstrap-modalbootstrap-4

Utilizing an Image as a Link in the Background

I am working on a way to convert the CSS background image I have into a clickable link that can be referenced. Here is my CSS code: #wrapper { height: 100%; padding: 66px; } #ad_11 { background-image: url(images/index1.png); display: block; text-indent: ...

htmlcss

What is the best way to add a hyperlink to my directory pictures?

Recently, I came across this piece of code: <? include "top.php"; ?> <center> <a href='upload.php'><button>Upload Image</button></a> </center> <br> <?php $www_root = 'http://annexsecurit ...

phphtmlcss

Sizing grids with Susy framework

My goal is to construct a grid layout utilizing the Susy plugins, but I'm encountering an issue where there is extra space present within it. $susy: ( gutter-position: after, container: 1280px, container-position: center, columns: 14, gutter ...

cssscss-mixinssusysusy-sass

What is the best way to position a div to float or hover from the bottom after it has been

I am working on creating a menu where clicking it will reveal a submenu at the bottom, but I'm encountering an issue. Currently, in my code, the submenu is appearing from right to left before moving down. Here is my code: <meta name="viewport" co ...

javascriptjqueryhtmlcss

How to keep a button active using CSS in a different area of the webpage

I'm new to coding in javascript and I could use some assistance solving an issue on my test website. The problem involves creating a top menu with an active button that stays highlighted when clicked. In this case, I specifically need the active CSS c ...

javascriptjqueryhtmlcss

ShadowCamera is absent in Three.js

I'm currently exploring the world of Three.js and experimenting with this demo code: function init(){ var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, .1, 500); var renderer = new ...

javascriptthree.jsshadow

What could be causing the Contact anchor element to not function properly?

I've been working on creating a dropdown menu for my API, but I'm having trouble getting the anchor links to function properly. I even attempted changing the "a" element to an onclick call with javascript:void(0) and added a function to open Gmai ...

javascripthtmlcssdrop-down-menudropdown

What is the best way to display a single form upon page reload if a radio button in Laravel 6.0 has not been selected?

Dealing with two forms within a single view comes with its challenges. Specifically, when one of the radio buttons is not selected and the page is reloaded, both forms are displayed. I attempted to use the 'check' attribute on one of the radio bu ...

javascriptphpjqueryhtmllaravel

What are some ways to prevent Bootstrap cards with images from stretching too far and creating additional white space?

My bootstrap cards are stretching too tall when I include images. Is there a way to prevent this overextension? https://i.sstatic.net/HEaYh.png https://i.sstatic.net/21DVq.png ...

htmlcssbootstrap-4

The select2 jQuery plugin is malfunctioning following an AJAX request to update the HTML content

I have implemented an AJAX function to change the content of a HTML div. Within this changed content, there is a select box with the 'select2' jQuery class. However, after the AJAX load, the select2 jQuery plugin does not work properly. Here is ...

jqueryhtmlajaxjquery-select2

What is the best way to choose a parent component's variant using styled components?

When using styled-components, we have the ability to add contextual styles utilizing the component selector pattern. But how can we target specific parent variants to style a child component contextually? In this scenario, we have three components - Child, ...

javascriptcssreactjsstyled-components

Delete the 'position: absolute' style in the media query

I have set the display property to flex for a container (.zone-container) to organize its children. However, I have used position: absolute on one of the children (#camp-zone) to stack it on top of the other children. In my media query, I want to remove th ...

cssflexboxmedia-queriescss-position

Suggestions for showing an error message when a field is empty and the user moves on to the next one

When a user begins typing a password without entering their email address first, immediately display the message - “Please Enter Your Email Address First”. My project utilizes bootstrap4 and jQuery/Javascript. I need the cursor to move to the field whe ...

javascriptjquerycsshtmlbootstrap-4