How to add shadow to input and custom icon using css-CodePudding

I am currently working on adding shadows to my custom icon and input. The current view is:

and the wanting output that I am looking for is:

I have been trying to add box-shadow, transparent background color, drop-shadow and this is the closest that I have achieved.

To mention, the arrow is an image:

body {
  background-image: url('../images/bg2.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 250px;
  padding: 5px 15px 30px 15px;
  width: 500px;
}

.text-center {
  text-align: center;
}

*:focus {
  outline: none;
}

.form-control {
  align-items: center;
  display: flex;
  justify-content: center;
}

label {
  display: block;
}

.help-text {
  color: #FFFF;
  font-size: 9px;
  color: #999;
  margin-right: 8px;
}

select,
input {
  background: #582e79;
  border-radius: 8px;
  border: 1px #582e79;
  color: #999;
  filter: drop-shadow(1px 1px 1px #3c1f52);
  margin-left: 25px;
  margin-top: 135px;
  padding: 5px 10px;
  text-align: center;
  width: 150px;
}

.mt10 {
  margin-top: 20px;
}

.submit {
  background-color: transparent;
  background-image: url("../images/arrow.png");
  background-position: center center;
  background-repeat: no-repeat;
  border: none;
  height: 23px;
  margin-left: 15px;
  margin-top: 135px;
  outline: none;
  padding-bottom: 30px;
  transition: 0.3s;
  width: 23px;
}

<div >
  <div >
    <input type="text" id="discord-id-input" name="discord-id-input" placeholder="Discord ID">
    <button id="discord-id-button" type="submit" ></button>
  </div>
  <a >ENTER DISCORD USER ID AND SUBMIT</a>
</div>

I wonder how can I add the shadow both to input and icon to be shadow like the wanting picture?

CodePudding user response：

Simply use the box-shadow-property liek this:

box-shadow: 0 2px 0 Black;

which has following syntax

[horizontal offset] [vertical-offset] [blur] [color]

#discord-id-button,
#discord-id-input {
  box-shadow: 0 2px 0 black;
}

/* original CSS */
body {
  background-image: url('../images/bg2.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 250px;
  padding: 5px 15px 30px 15px;
  width: 500px;
}

.text-center {
  text-align: center;
}

*:focus {
  outline: none;
}

.form-control {
  align-items: center;
  display: flex;
  justify-content: center;
}

label {
  display: block;
}

.help-text {
  color: #FFFF;
  font-size: 9px;
  color: #999;
  margin-right: 8px;
}

select,
input {
  background: #582e79;
  border-radius: 8px;
  border: 1px #582e79;
  color: #999;
  filter: drop-shadow(1px 1px 1px #3c1f52);
  margin-left: 25px;
  margin-top: 135px;
  padding: 5px 10px;
  text-align: center;
  width: 150px;
}

.mt10 {
  margin-top: 20px;
}

.submit {
  background-color: transparent;
  background-image: url("../images/arrow.png");
  background-position: center center;
  background-repeat: no-repeat;
  border: none;
  height: 23px;
  margin-left: 15px;
  margin-top: 135px;
  outline: none;
  padding-bottom: 30px;
  transition: 0.3s;
  width: 23px;
}

.submit:hover {
  background-image: url("../images/arrow-hover.png");
}

<div >
  <div >
    <input type="text" id="discord-id-input" name="discord-id-input" placeholder="Discord ID">
    <button id="discord-id-button" type="submit" ></button>
  </div>
  <a >ENTER DISCORD USER ID AND SUBMIT</a>
</div>