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

Question

[vitali1024]

Здравствуйте! Хочу сделать вот такую кнопку - imgur.com/BtsmKSI, но столкнулся с проблемой: не знаю, как сделать её(рамку) прозрачной, не всю, а только ту часть, которая расположена поверх картинки. Вот мой CodePen - codepen.io/anon/pen/RNYVyO

Answer 1

[Alex]

По-моему, на скриншоте как раз вся рамка прозрачная, просто половина её на белом фоне.

Comments

[vitali1024]

Действительно, так оно и есть. Сам создал проблему из ничего :)

Answer 2

[IceJOKER]

Добавляете помощника :after (или просто после кнопки в ручную), с прозрачным фоном и позиционируете как вам нужно.
Нет возможности указать прозрачность половине границы, целая сторона только

Answer 3

[slaven1707]

border: rgba(0,0,0, 0.5) / 0,0,0 - это черный цвет в системе rgba, а 0.5 - это значение прозрачности

Answer 4

[Ваге]

<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;
}