CSS

.btn_style03 {
	width: 100%;
	max-width: 300px;
}

.btn_style03 a {
 display: block;
 padding: 17px 0;
 text-align: center;
 text-decoration: none;
 font-weight: normal;
 font-size: 14px;
 font-size: 1.4rem;
 border: 1px solid var(--main-color);
 letter-spacing: 0.05em;
 position: relative;
 color: #fff;
 background: var(--main-color);
 border-radius: 10px;
}

.btn_style03 a:hover {
 color: var(--main-color);
 background: #fff;
}

.btn_style03 a:before {
  content: '';
  width: 17px;
  height: 3px;
  border-right: 2px solid #fff;
  border-bottom: 1px solid #fff;
  position: absolute;
  top: 50%;
  left: calc(100% - 50px);
  transform: translateY(-50%) skewX(45deg);
  transition: all 0.3s ease;
}

.btn_style03 a:hover:before {
 border-color: var(--main-color);
 width: 25px;
}
一覧に戻る