How do you add shadows to a button?-CodePudding

I need to know for a project I am doing.

CodePudding user response：

You can implement this by using a CSS code called box-shadow. I will provide an example.

box-shadow: 10px 15px 20px 5px black;

In this line, we have four numerical values and one color value. The numerical values each represent something different. The first value is horizontal displacement of the shadow. Positive means towards the right while negative values push the shadow towards the left. The second value is vertical displacement. Positive values move the shadow down while negative values move the shadow up. The third value is the blur. A higher value accounts for a blurrier shadow. Lastly, the fourth value is the size of the shadow. You can increase this value to make the shadow larger than the button. Hope this helps.

CodePudding user response：

I think you can get it by a google search. Please check the above codepen with the example. please check the provided link below.

html, body {
  height: 100%;
}

.wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  width: 140px;
  height: 45px;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 500;
  color: #000;
  background-color: #fff;
  border: none;
  border-radius: 45px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
  }

.button:hover {
  background-color: #2EE59D;
  box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
  color: #fff;
  transform: translateY(-7px);
}

<div >
  <button >Submit</button>
</div>

https://codepen.io/seme332/pen/reJOwo