Как стилизовать input [type='submit']? С помощью JS или CSS

163

18 октября 2021, 03:30

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

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

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

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

Спасибо.

Answer 1

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

.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>

Answer 2

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">

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Приклеить div к низу экрана

Есть div с результатом подсчета калькулятора (#grid-15-15)Нужно этот div "приклеить" к низу экрана, чтобы он оставался там и прокручивался вместе со страницей,...

203

HTML