CSS 버튼을 사용하여 화살표가있는 링크 버튼

Question

아래와 같은 링크 버튼을 표시하는 CSS 전용 솔루션이 있는지 궁금합니다. 어떤 조언?

Answer 1

당신은 단순히 의사 요소를 사용할 수 있으며 일부 border 속성은 당신이 원하는 것을 얻기 위해 다른 값을 조정합니다

.link { 
 
    padding: 10px; 
 
    display: inline-block; 
 
    width: 80px; 
 
    border-top: 1px solid #000; 
 
    border-bottom: 1px solid #000; 
 
    text-align: center; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.link:before,.link:after { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 30px; 
 
    width: 30px; 
 
    border: 1px solid #000; 
 
    left: -19px; 
 
    top: 3px; 
 
    background: #fff; 
 
    transform: rotate(45deg); 
 
    transform-origin: center; 
 
} 
 
.link:after { 
 
    right: -19px; 
 
    left:auto; 
 
}

<a href="#" class="link">link</a>