오른쪽 화살표가있는 CSS button

질문

이 button을 만드는 가장 쉬운 방법은?

지금까지는 기본적으로 오른쪽 화살표가 필요합니다.

.end-btn {
  margin-top: 2vw;
  background-color: #DAA521;
  border: none;
  width: 15vw;
  height: 3vw;
  font-size: 1.5vw;
  color: #FFFFFF;
  border-radius: 0.5vw;
  font-weight: bold;
  cursor: pointer;
}

<button class="end-btn"> View profile </button>

Expand snippet

답변1

가장 쉬운 방법은 fontawesome 을 사용하는 것입니다. 무료 버전을 사용하면 다음 코드를 사용할 수 있습니다.

<button>View Profile <i class="fas fa-chevron-right"></i></button>

시작하려면 이메일 주소 만 있으면됩니다.https://fontawesome.com/start

답변2

이것은 button에 오른쪽 화살표를 제공하는 가장 간단한 방법입니다.

.end-btn {
  margin-top: 2vw;
  background-color: #DAA521;
  border: none;
  width: 15vw;
  height: 3vw;
  font-size: 1.5vw;
  color: #FFFFFF;
  border-radius: 0.5vw;
  font-weight: bold;
  cursor: pointer;
}

<button class="end-btn"> View profile &nbsp;&nbsp;&nbsp;> </button>

Expand snippet

또한 아래와 같이 HTML에 외부 CSS를 추가 할 수있는 경우 일부 아이콘을 사용할 수 있습니다.

.end-btn {
  margin-top: 2vw;
  background-color: #DAA521;
  border: none;
  width: 30vw;
  height: 7vw;
  font-size: 3vw;
  color: #FFFFFF;
  border-radius: 0.5vw;
  font-weight: bold;
  cursor: pointer;
  padding: 10px;
}

.end-btn i {
  float: right;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="end-btn"> View profile <i class="fa fa-chevron-right"></i></button>

Expand snippet

답변3

.c-btn{
  border: none;
  background-color: orange;
  padding: 12px 48px 12px 24px;
  border-radius: 4px;
  color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7.41' height='12' viewBox='0 0 7.41 12'%3E%3Cpath d='M10,6,8.59,7.41,13.17,12,8.59,16.59,10,18l6-6Z' transform='translate(-8.59 -6)' fill='%23fff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 24px center;
}

<button class="c-btn">View Profile</button>

Expand snippet

 

 

 

 

출처 : https://stackoverflow.com/questions/63434434/css-button-with-right-arrow