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

블로그를하다보면 이미지 버튼을 사용해서 이쁘게 꾸미고 싶을때가 있죠? 하지만 색과 모양으로만 되어있는 버튼의 경우 이미지보다 css가 훨씬 로딩이 빠르고, 리소스도 덜 잡아먹습니다. 뿐만 아니라 간단한 애니메이션으로 효과를 극대화 시킬 수 있습니다. CSS와 HTML만을 사용하여 a태그로 둥근 모서리와 그라디언트 배경, 그리고 동적인 화살표 애니메이션 효과를 가진 버튼을 만드는 방법에 대해 소개하겠습니다.

 

 

디자인 개요

버튼의 모양은 둥근 모서리를 가지며, 그라디언트 배경색으로는 위쪽은 블루, 아래쪽은 보라색을 사용합니다. 버튼 내부에는 중앙에 "버튼txt"라는 텍스트와 그 오른쪽에 화살표 아이콘이 포함됩니다. 이 화살표 아이콘은 마우스 오버 시 왼쪽에서 오른쪽으로 애니메이션 효과를 보여줍니다.

 

HTML 구조

HTML은 간단합니다. a 태그 내부에 두 개의 span 태그를 사용하여 텍스트와 화살표를 표시합니다. 이 구조는 버튼의 기본 틀을 제공합니다. your-link-here를 원하는 링크로 변경하면 원하는 링크로 넘어가게 됩니다.

<p class="contentcenter">
    <a href="your-link-here" class="gradient-button">
        <span class="btn-text">버튼txt</span>
        <span class="arrow">➔</span>
    </a>
</p>

 

CSS 스타일링

CSS는 버튼의 디자인, 그라디언트 배경, 둥근 모서리, 그리고 화살표의 애니메이션 효과를 정의합니다. 여기서 중요한 것은 linear-gradient를 사용하여 배경색을 정의하고, @keyframes를 활용하여 화살표의 움직임을 정의하는 것입니다.

/* Entry content 스타일링 */
.entry-content {
    width: 800px; /* 컨텐츠의 너비 설정 */
    text-align: center; /* 컨텐츠 중앙 정렬 */
}

/* Gradient button의 기본 스타일 */
.gradient-button {
    display: inline-flex; /* 버튼 내 요소를 inline-flex로 배치 */
    align-items: center; /* 버튼 내 요소를 수직으로 중앙 정렬 */
    justify-content: space-between; /* 버튼 내부의 공간을 균등하게 분배 */
    width: 100%; 
    max-width: 400px; /* 버튼의 최대 너비 */
    height: 60px; /* 버튼의 높이 */
    border-radius: 40px; /* 버튼의 모서리 둥글게 처리 */
    background: linear-gradient(to bottom, #6262ff, #b30bb3); /* 그라디언트 배경 설정 */
    cursor: pointer; /* 마우스 오버시 포인터 모양 */
    transition: background 0.3s ease; /* 배경색의 전환 효과 */
    padding: 10px 20px; /* 버튼 내부의 패딩 값 */
    position: relative; /* 후속 요소들의 위치 지정을 위한 기준점 설정 */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);  /* 그림자 효과 */
    text-decoration: none; /* 텍스트 밑줄 제거 */
}

/* 버튼 호버 상태의 스타일 */
.gradient-button:hover {
    background: linear-gradient(to bottom, darkblue, darkmagenta); /* 호버시 배경색 변경 */
}

/* 화살표 아이콘 스타일 */
.arrow {
    font-size: 30px;
    font-weight: 800;
    color: white;
    animation: slideArrow 0.7s infinite alternate; /* 화살표 애니메이션 */
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%); /* 수직 위치 조정 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 텍스트 그림자 */
}

/* 화살표 애니메이션 효과 */
@keyframes slideArrow {
    from {
        transform: translateY(-50%) translateX(0);
    }
    to {
        transform: translateY(-50%) translateX(10px);
    }
}

/* 버튼 텍스트 스타일 */
.btn-text {
    color: white;
    font-weight: bold;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%); /* 텍스트 위치 조정 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 텍스트 그림자 */
}

/* 모바일 화면 최적화 */
@media (max-width: 768px) {
    .gradient-button {
        max-width: 100%;
        height: 60px;
    }
    
    .arrow, 
    .btn-text {
        font-size: 16px; /* 폰트 크기 조절 */
    }
}

 

소스코드 다운받기

위의 소스를 실행하면 다음과 같은 버튼을 그릴 수 있습니다.

버튼txt ➔

 

위의 소스는 아래의 다운로드를 통해서 받을 수 있습니다.

a태그둥근모서리그라디언트애니메이션.zip

0.00MB

 

결론

이렇게 간단한 HTML과 CSS만으로도 동적인 애니메이션 효과를 가진 버튼을 만들 수 있습니다. 특히, CSS의 linear-gradient와 @keyframes를 활용하면 다양한 애니메이션 효과를 쉽게 구현할 수 있습니다. 이 방법을 활용하여 웹 페이지의 사용자 경험을 향상시켜 보세요!