[CSS] a태그 오른쪽둥근테두리 그라디언트 애니메이션 버튼 만들기

블로그를 운영하다보면 웹 디자인적인 요소가 많이 필요합니다. 그 중에서도 다른 글로 링크를 연결하는 버튼이 많이 필요한데 필요할 때마다 이미지를 만들어서 올린다면 리소스 낭비가 될 수도 있습니다. 그래서 이글에서는 CSS를 이용해서 a태그 오른쪽둥근테두리 그라디언트 애니메이션 버튼을 만들어보는 방법에 대해 알아보겠습니다.

 

 

기본 스타일 설정

:root {
    --border-insidegap: 5px;
    --border-radiusvalue: 50px;
}

먼저, 공통 요소들의 기본 값을 설정합니다. `:root` 안에 전역 변수를 사용하여 미리 정의해둘 수 있습니다. 이를 통해 코드 재사용성을 높이고, 디자인 변경 시 일관성을 유지할 수 있습니다.

`:root`는 문서 트리의 루트 요소를 선택하는 CSS의 의사 클래스입니다. 이 경우에는 CSS 변수를 전역적으로 선언하기 위해 사용되었습니다. 이 변수들은 후에 테두리의 그라디언트를 생성할 때 사용됩니다.

 

2. 기본 버튼 스타일

.btn-base {
    display: inline-block;
    align-items: center;
    justify-content: space-between;
    width: 100%; 
    max-width: 400px;
    height: 60px;
    cursor: pointer;
    transition: background 0.3s ease;
    padding: 10px 20px;
    position: relative;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 그림자 추가 */
}

`.btn-base` 클래스는 버튼의 기본 스타일을 정의합니다. 여기에는 버튼의 크기, 패딩, 그림자 등의 속성이 포함되어 있습니다.

 

3. 그라디언트 테두리

.btn-roundborder-right {
    background: linear-gradient(45deg, purple, blue);
    position: relative;
    border-top-right-radius: var(--border-radiusvalue);
    border-bottom-right-radius: var(--border-radiusvalue);
    z-index: 1;
}

.btn-roundborder-right::before {
    content: "";
    position: absolute;
    top: var(--border-insidegap);
    right: var(--border-insidegap);
    bottom: var(--border-insidegap);
    left: var(--border-insidegap);
    z-index: -1;
    background: white;
    border-top-right-radius: calc(var(--border-radiusvalue) - var(--border-insidegap));
    border-bottom-right-radius: calc(var(--border-radiusvalue) - var(--border-insidegap));
}

 

이 부분은 테두리에 그라디언트 효과를 부여하는 데 중요한 부분입니다. 실제 테두리에 직접 그라디언트를 적용할 수 없기 때문에 먼저 오른쪽둥근모서리의 그라디언트배경을 그린 다음, `::before` 의사 요소를 사용하여 테두리처럼 보이게 하는 기법을 사용했습니다. 

위 그림에서 세번째 버튼 이미지의 테두리에 그라디에이션이 들어가 있는걸 확인 할 수 있습니다.

 

4. HTML 구조

<p class="contentcenter">
    <a href="your-link-here" class="btn-base btn-roundborder-right">
        <span class="btn-text btn-textcolor-bk">버튼txt</span>
        <span class="arrow btn-textcolor-bk">➔</span>
    </a>
</p>

HTML에서는 여러 버튼 예제를 보여주기 위해 p태그를 사용하여 각 버튼을 중앙에 배치하였고, a 태그를 사용하여 버튼을 클릭 가능하게 만들었습니다.

 

5. 결과

위에서 설명한 코드를 실행하면 아래와 같은 결과를 확인 할 수 있습니다.

버튼txt ➔

버튼txt ➔

버튼txt ➔

또한, 위의 내용은 아래의 파일을 다운로드 받으실 수 있습니다.

CSS a태그 오른쪽둥근테두리 그라디언트 애니메이션 버튼 만들기.zip

0.00MB

 

결론

이 글을 작성하면서 이전에 작성했던 CSS로 a태그 글자 강조하기 마우스 오버 색 변경했던 글의 소스를 기초로 발전시켜보았습니다. [CSS] a태그로 둥근 모서리와 그라디언트 배경, 애니메이션 효과 버튼 만들기

[CSS] a태그로 둥근 모서리와 그라디언트 배경, 애니메이션 효과 버튼 만들기

 

위의 링크의 소스를 이용하여 각 기능별로 쪼개고 발전시키면서 CSS에서 변수를 사용하는 방법과 클래스를 여러개 만들어서 중복사용할 수 있는 기능도 확인해 볼 수 있었습니다.

CSS는 매우 강력한 도구로써, 기본적인 속성만을 사용하여도 다양한 디자인 효과를 구현할 수 있습니다. 테두리에 그라디언트를 넣는 것은 그 중 하나의 예시일 뿐입니다. 위 예제를 통해 다양한 스타일링 기법에 대해 알게 되셨길 바랍니다. 자신만의 스타일로 웹페이지를 꾸며보세요!