0

Подскажите пожалуйста, каким образом можно из input[type=submit] сделать кнопку вот как эта?

введите сюда описание изображения

Я делала кнопки используя псевдоэлемент :before, но наткнулась на input, с которым псведоэлемент не прокатит. Заменить его нельзя.

Кто знает как это сделать?

Чтобы нижний бордер был чуть выше и не доходил до конца, как на скриншоте.

Спасибо.

2 ответа 2

2

Набросал тут на коленке, посмотрите, может это то что вам нужно

.btn-wrapper {
  width: 100px;
  padding 5px 15px;
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  border-top: 6px solid #FF924D;
  border-right: 6px solid #FF924D;
  border-left: 6px solid #FF924D;
}

.btn-wrapper input {
  width: calc(100% - 10px);
  color: #123A63;
  font-weight: 500;
  background: #fff;
  outline: none;
  border: none;
  margin-top: 5px;
  padding-bottom: 5px; 
  margin-bottom: 5px;
  border-bottom: 4px solid #FFCC79;
}
<div class="btn-wrapper">
  <input type="submit" value="CTA">
</div>

1
  • я сразу не уточнил, у вас могло не быть такой возможности. Рад что помог) Commented 1 нояб. 2019 в 19:08
0

input {
  border: none;
  border-bottom: 5px solid #ffbb00;
  padding-bottom: 20px;
  outline: none;
  font-size: 24px;
  font-weight: 800;
  text-align: center;
}
<input type="text" value="CTA">

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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