HTML&CSS

ボタンデザイン！線が細い矢印アイコン

線が細い矢印アイコンがおしゃれだなぁと思い作成してみました。矢印の大きさ、線の太さや位置を自分で調整出来るので便利です。 いつもFontAwesomeを使っているのですが、細い矢印は有料だったので作成してみました。

Button


<a href="#" class="btn">Button</a>
.btn{
  position:relative;
  background-color:#48d1cc;
  color:#fff;
  text-decoration:none;
  padding: 8px 40px;
}
.btn::after{
  position:absolute;
  right: 1em;
  top: 50%;
  content:'';
  width: 0.7em;
  height: 0.7em;
  border-right: solid 1px #fff;
  border-bottom: solid 1px #fff;
  transform: rotate(-45deg);
  margin-top:-0.35em;
}

-HTML&CSS