2

Нужно сделать рамку для кнопки используя CSS. Я по разному побывал, но ничего не получается.

Побывал сделать используя градиент https://codepen.io/Gildars/pen/YYjGVP

.btn {
  background: no-repeat center center,radial-gradient(closest-side, #fff 0, #fff 84%, rgba(50,46,46,0) 88%, rgba(50,46,46,0) 100%);
  text-decoration: none;
  border-radius: 25px;
  cursor: pointer;
  color: #000;
  border: 2px solid #fff;
  transition: all 250ms;
  width: 150px;
  height: 50px;
  display:flex;
  font-size:18px;
  text-transform:uppercase;
  align-items:center;
  justify-content:center

}

Вот что должно получится.

Вот что должно получится.

3 ответа 3

2

Используйте для этого border и box-shadow:

body {
  background: #000;
}
button {
  text-decoration: none;
  border-radius: 25px;
  cursor: pointer;
  color: #000;
  transition: all 250ms;
  width: 150px;
  height: 50px;
  font-size:18px;
  font-weight: bold;
  text-transform:uppercase;
  border: 3px solid #000;
  background: #fff;
  box-shadow: 0 0 0 3px #fff;
}
<button>Войти</button>

2

Еще вариант

body {
  background: #000;
}
button {
  text-decoration: none;
  border-radius: 25px;
  cursor: pointer;
  color: #000;
  transition: all 250ms;
  width: 150px;
  height: 50px;
  font-size:18px;
  font-weight: bold;
  text-transform:uppercase;  
  background: #fff;
  border: none;
  box-shadow: 0 0 0 3px #000, 0 0 0 6px #fff;
}
<button>Войти</button>

2
  • А как сделать что бы рамка вокруг кнопки была не черная а прозрачная?
    – Gildars
    Commented 15 янв. 2018 в 14:55
  • @Gildars jsfiddle.net/soledar10/3rsdcnbo
    – soledar10
    Commented 15 янв. 2018 в 15:22
1

Градиент убрать, и:

box-shadow: 0 0 0 1.5px white;

Если кнопка квадратная есть еще outline.

Ваш ответ

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

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