Как сделать такие эффекты только на css?

Question

[Рома]

Добрый день, подскажите, как сделать на чистом css кнопку, изображенной на скриншоте? (исказить ее)
как можно реализовать тень, которая находится на расстоянии?
Заранее спасибо за ответы.

Comments

[Ankhena]

Вам помогут:
Псевдоэлементы
Позиционирование
овал на CSS
курс по теням на htmlacademy либо гугл по этому же вопросу.

Если это не поможет, то поможет фриланс.

Answer 1

[Александр Золотарев]

На чистом css будет проблематично, я бы просто картинкой вставил такую тень и кнопку.

Comments

[Рома]

именно нужно только csэ и все)

[Александр Золотарев]

Рома, ну тогда делайте кнопку составными частями, т.е. тень отдельно текст отдельно и т.д. Придётся помучатся и подобрать правильные параметры что бы было точь в точь.

Answer 2

[Конан Варвар]

Сделайте тень псевдоэлементами да и все. Какие проблемы))

Comments

[Johny Smith]

Надо както попросить создателей Тостера сделать привязку к карточке банка, чтобы можно было взять за какуюто работу подобную средства, 1-2-5-20-25$ я бы такое сделал, естественно пусть процентов 1-10% берёт себе тостер с работы, как бы комиссия за обслуживание хостинга, менеджеров, пэй сервиса и т.п. не жалко конечно, за некоторое я бы и сам платил, почему бы и нет, так разработку можно ускорить всего и вся

Answer 3

[sergski]

3d эффект можно, а вот овальную тень от прямоугольника никак)
что можно сделать

Comments

[Apelsinkaaa]

Если попиксельная точность не нужна, то добавить тень можно дописав к вашему коду что-то вроде:

div:after {
  content:"";
  position: absolute;
  display:block;
  width:240px;
  height:40px;
  background-color: transparent;  
  margin-left:-18px;
  box-shadow: 1px 50px 20px -9px rgba(50, 50, 50, 0.76);
  border-radius: 50px;
}