Кнопка стрелкой на CSS

Привет, Хабр!

Верстаю я тут как-то один сайт, и там дизайнер сделал кнопку в виде стрелочки, то есть слева бордер ровный, а справа должен быть треугольник, предающий кнопке направление. Я долго гуглил, но так и не нашел решения на эту тему. Кнопки есть какие угодно, но только не такие. Поэтому я использовал Bootstrap и какие-то мысли, которые нарыл в интернетах, и в итоге у меня получилась вот такая кнопка.



Так как не нашел подобного решения, решил поделиться им здесь, может кто-то сейчас ищет именно это.
Внутри описание.


Чаще всего я использую Twitter Bootstrap для сетки и кнопок, но кнопки часто кастомизирую на основе стандартных. И эта кнопка не исключение.

Собственно — код:

.btn-buy {
  display: block;
  color: #fff;
  border-radius: 0em; /* Обнулить округлости */
  -moz-border-radius: 0em; /* Обнулить округлости */
  -webkit-border-radius: 0em; /* Обнулить округлости */
  background: #265d94;
  border: none;
  text-shadow: -1px -1px 0px rgba(0,0,0,.2);
  border-bottom: 2px solid #153a65;
  position: relative;
  
  margin: 0 auto; /* Это просто для выравнивания кнопки посередине */
}
.btn-buy:after, .btn-buy:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
}
.btn-buy:after {
	border-color: rgba(136, 183, 213, 0);
	border-left-color: #265d94;
	border-width: 16px;
	margin-top: -16px;
}
.btn-buy:before {
	border-color: rgba(194, 225, 245, 0);
	border-left-color: #153a65;
	border-width: 16px;
	margin-top: -14px;
}
.btn-buy:hover,
.btn-buy:focus,
.btn-buy:active,
.btn-buy.active,
.open .dropdown-toggle.btn-buy {
  color: #fff;
  outline: none;
  background: #2e6eae;
  border-bottom: 2px solid #1b4a80;
}
.btn-buy:hover:after,
.btn-buy:focus:after,
.btn-buy:active:after,
.btn-buy.active:after {
  border-left-color: #2e6eae;
}
.btn-buy:active,
.btn-buy.active,
.open .dropdown-toggle.btn-buy {
  background: #265d94;
  color: #fff;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}
.btn-buy:active:after,
.btn-buy.active:after,
.open .dropdown-toggle.btn-buy:after {
  border-left-color: #265d94;
}

Всё достаточно просто — к элементу кнопки я добавил псевдо–элемент с бордером, о котором прочитал здесь, спасибо alizar, и еще один псево–элемент, но ниже — для тени.

.btn-buy:after, .btn-buy:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
}
.btn-buy:after {
	border-color: rgba(136, 183, 213, 0);
	border-left-color: #265d94;
	border-width: 16px;
	margin-top: -16px;
}
.btn-buy:before {
	border-color: rgba(194, 225, 245, 0);
	border-left-color: #153a65;
	border-width: 16px;
	margin-top: -14px;
}

Ну а дальше всё стандартно, при наведении это

.btn-buy:hover,
.btn-buy:focus,
.btn-buy:active,
.btn-buy.active,
.open .dropdown-toggle.btn-buy {
  color: #fff;
  outline: none;
  background: #2e6eae;
  border-bottom: 2px solid #1b4a80;
}
.btn-buy:hover:after,
.btn-buy:focus:after,
.btn-buy:active:after,
.btn-buy.active:after {
  border-left-color: #2e6eae;
}

при нажатии это

.btn-buy:active,
.btn-buy.active,
.open .dropdown-toggle.btn-buy {
  background: #265d94;
  outline: none;
  color: #fff;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}
.btn-buy:active:after,
.btn-buy.active:after,
.open .dropdown-toggle.btn-buy:after {
  border-left-color: #265d94;
}

Вот демо на jsfiddle.net

Был рад, если помог кому–нибудь, всем добра.