1

Есть кнопка, нужно сделать для нее тень как на картинке. Пытался создать ещё один блок div, наклонить его, закрасить что бы он был как тень но не вышло, подскажите.

input#submit {
	width: 312px;
	height: 40px;
	background: #635960;
	color: #fffecd;
	font-family: 'Montserrat';
	font-size: 21px;
	border: none;
}
<input type="Submit"  id="submit" value="Submit">

Сама тень

1
  • на градиент похоже
    – zb'
    3 июн 2017 в 14:32

1 ответ 1

2

Чуток похоже..

но у меня не понятка почему пришлось body минусовать z-index

* {
  margin: 0;
  padding: 0;
}

html,
body {
  position: relative;
  z-index: -100;
}

button {
  display: block;
  width: 200px;
  height: 50px;
  border: none;
  outline: none;
  background-color: rgb(99, 89, 96);
  color: lightgreen;
  text-transform: uppercase;
  position: relative;
  margin: 50px auto;
}

button:after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 200px;
  height: 300px;
  top: 0;
  left: 83px;
  background: linear-gradient(rgba(200, 200, 200, .3), rgba(240, 240, 240, .2), rgba(200, 200, 200, 0));
  transform: skew(28deg);
  z-index: -1;
}
<button>submit</button>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.