Button with Arrow.css

矢印付きのボタンを生成するcss

テキスト

矢印

矢印の位置:

ボタンスタイル

ボタンの幅:

角丸:

カラー

copy
<a href="" class="bw-arrow"><span>{{styleObject.text}}</span></a>
copy
<button class="bw-arrow"><span>{{styleObject.text}}</span></button>
copy
.bw-arrow {
  {{ styleObject.displayUp }}
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: {{ styleObject.fontSize}}px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: {{styleObject.borderRadius}}px;
  padding: 15px;
  background-color: {{ styleObject.backGroundColor }};
  color: {{ styleObject.color }};
  text-align: center;
  max-width: {{ styleObject.maxWidthPX }};
  -webkit-transition: 0.3s linear 0s;
  -o-transition: 0.3s linear 0s;
  transition: 0.3s linear 0s;
}

.bw-arrow > *:first-child {
  width: calc(100% - 10px * 3);
}

.bw-arrow::after {
  content: '';
  display: inline-block;
  padding: 0;
  width: {{ styleObject.arrowSize }}px;
  height: {{ styleObject.arrowSize }}px;
  border-top: solid {{ styleObject.arrowBorder }}px {{ styleObject.color }};
  border-right: solid {{ styleObject.arrowBorder }}px {{ styleObject.color }};
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  -webkit-transform: rotate(45deg) translateX(-5px) translateY(5px);
      -ms-transform: rotate(45deg) translateX(-5px) translateY(5px);
          transform: rotate(45deg) translateX(-5px) translateY(5px);
          margin-left: -5px;
}

.bw-arrow:hover {
  opacity: 0.5;
}

a.bw-arrow:link, a.bw-arrow:active, a.bw-arrow:hover, a.bw-arrow:visited {
  color: {{ styleObject.color }};
  text-decoration: none;
}

button.bw-arrow {
  width: 100%;
  border: none;
  cursor: pointer;
}

Set Up

<link rel="stylesheet" type="text/css" href="button-with-arrow.css">
<a href="" class="bw-arrow"><span>ANKER</span></a>
<button class="bw-arrow"><span>BUTTON</span></button>

Use

Download