@vitali1024

Как сделать прозрачной рамку для кнопки?

Здравствуйте! Хочу сделать вот такую кнопку - imgur.com/BtsmKSI, но столкнулся с проблемой: не знаю, как сделать её(рамку) прозрачной, не всю, а только ту часть, которая расположена поверх картинки. Вот мой CodePen - codepen.io/anon/pen/RNYVyO
  • Вопрос задан
  • 5585 просмотров
Решения вопроса 1
isqua
@isqua
Научу HTML, CSS, JS, BEM и Git
По-моему, на скриншоте как раз вся рамка прозрачная, просто половина её на белом фоне.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
@IceJOKER
Web/Android developer
Добавляете помощника :after (или просто после кнопки в ручную), с прозрачным фоном и позиционируете как вам нужно.
Нет возможности указать прозрачность половине границы, целая сторона только
Ответ написан
Комментировать
@slaven1707
border: rgba(0,0,0, 0.5) / 0,0,0 - это черный цвет в системе rgba, а 0.5 - это значение прозрачности
Ответ написан
Комментировать
vahe_2000
@vahe_2000
<input type="button" class="button" value="GO AHEAD" />


CSS

.button {
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 218px;
  height: 57px;
  cursor: pointer;
  padding: 10px 20px;
  border: 7px solid #BBEBE1;
  font: normal 23px/normal Arial, Helvetica, sans-serif;
  color: rgba(255,255,255,0.9);
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #1ABC9C;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы