모두 주목! 눈에 띄는 버튼 애니메이션 비법 공개(feat. 워드프레스)
사이트의 첫인상은 사용자에게 큰 영향을 미칩니다. 특히, 눈에 띄는 버튼 애니메이션은 그 자체로 주목받으며, 그로 인해 방문자는 호기심에 그 버튼을 클릭하게 될 수도 있습니다.
그런데 버튼을 눈에 띄게 만들기 위해서는 어떻게 해야 할까요? 오늘은 워드프레스 디자인 관점에서 사선으로 빛이 지나는 애니메이션 효과를 버튼에 적용하여 사용자들의 눈길을 사로잡는 방법을 소개합니다.
이 포스트를 통해 여러분은 워드프레스에서 사용하는 버튼에 생명을 불어넣는 법을 배울 것입니다. HTML과 CSS, 그리고 JavaScript를 사용하여 초보자도 쉽게 빛나는 버튼 만들기 따라할 수 있도록 상세하게 설명하니, 꼭 끝까지 읽어보세요!
본 포스트의 내용은 워드프레스 본문에 적용하는 코드를 소개한 것으로 관련 스킬이 부족하신 분들은 주의를 기울여주시기 바랍니다. 기존에 작성했던 포스트의 삭제, 변경 등의 리스크를 감안하여 해당 포스트를 카피해서 임시저장 상태로 두고 해보시기를 권고드립니다.
바쁘신 분을 위해 요약해드립니다. 2번의 소스코드를 ‘추가 CSS’에 붙혀넣고, 원하는 본문 위치에 ‘사용자 html’을 삽입하여 1번과 3번의 소스코드를 연달아 붙혀넣는다.(아래에서는 ‘사용자html’이 아니고 코드편집기에서 하는 방법으로 설명합니다.)
버튼 애니메이션 적용 3단계
1. 버튼 만들기
먼저, 워드프레스 본문에 버튼을 추가합니다.
우측상단의 점3개 버튼을 눌러 코드 편집기로 들어가면 HTML 모드로 전환됩니다.(Ctrl + Shift + Alt + M 단축키를 이용하셔도 됩니다.)
여기서 원하는 위치에 아래 코드를 복사해서 붙혀넣습니다.
<a href="https://example.com" class="shining-button">클릭하세요</a>
이 코드는 “클릭하세요”라는 텍스트가 들어간 간단한 버튼을 만듭니다. 클릭하면 example.com으로 연결되도록 되어 있습니다.
“내용 더 알아보기” 등과 같이 버튼의 텍스트 내용은 원하는 걸로, 링크 주소도 원하시는 것으로 변경하시면 됩니다.
2. CSS 스타일 적용
이제 버튼의 스타일과 애니메이션을 추가해 보겠습니다.
워드프레스의 커스텀 CSS 편집기(외모 > 사용자 정의 > 추가 CSS)에 아래의 CSS 코드를 추가하세요.
기호에 따라서 색깔 변경해서 사용하시면 됩니다.(현재: 평상시-오렌지색, 버튼온-푸른색) 색깔 부분에 있어서 정보는 ‘원하는 색상 찾기’의 기술-이미지에서 색상 추출부터 조화로운 컬러 매칭까지 포스트에서 확인해보세요.
.shining-button {
position: relative;
display: inline-block;
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #ff9800; /* 오렌지색 */
border: none;
border-radius: 5px;
overflow: hidden;
cursor: pointer;
text-decoration: none;
transition: background-color .3s;
}
.shining-button::before {
content: '';
position: absolute;
top: 0;
left: -200%;
width: 200%;
height: 100%;
transform: skewX(-45deg);
background: linear-gradient(135deg, transparent 75%, rgba(255,255,255,.5) 75%, rgba(255,255,255,.5) 80%, transparent 80%);
transition: left 1s, opacity 1s;
opacity: 0;
}
.shining-button:hover { background-color: #0073aa; }
.shining-button.shine::before {
left: 100%;
opacity: 1;
}
이 CSS 코드는 버튼에 기본 스타일을 설정하고, 마우스를 올렸을 때 배경색이 오렌지색에서 푸른색으로 변경되며 사선 빛 애니메이션 효과가 나타나게 해줍니다.
3. JavaScript로 애니메이션 반복하기
애니메이션이 주기적으로 반복되도록 하려면 JavaScript를 사용하면 됩니다. 코드 편집기의 HTML 모드에서 아래 코드를 위의 1번 코드 아래에 추가하세요.
<script>
document.addEventListener('DOMContentLoaded', () => {
const button = document.querySelector('.shining-button');
setInterval(() => {
button.classList.toggle('shine');
}, 1500);
});
</script>
이 스크립트는 페이지가 로드된 후 버튼에 대해 주기적으로 shine
클래스를 추가하고 제거하여 애니메이션을 반복합니다.
setInterval
함수를 사용하여 1.5초(1500)마다 애니메이션이 반복되도록 설정하였습니다.
온라인 적용 전 로컬에서 테스트 해보기
버튼 효과를 워드프레스에 적용하기 전에, 먼저 로컬(내 컴퓨터)에서 테스트해보는 것이 좋습니다.
포스트의 디자인과 자신이 원하는 형태가 맞는지 사전에 확인하기 위함입니다. 아래의 절차를 따라 진행해보세요.
HTML 파일 (완전한 형태)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shining Button Test</title>
<style>
.shining-button {
position: relative;
display: inline-block;
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #ff9800; /* 오렌지색 */
border: none;
border-radius: 5px;
overflow: hidden;
cursor: pointer;
text-decoration: none;
transition: background-color .3s;
}
.shining-button::before {
content: '';
position: absolute;
top: 0;
left: -200%;
width: 200%;
height: 100%;
transform: skewX(-45deg);
background: linear-gradient(135deg, transparent 75%, rgba(255,255,255,.5) 75%, rgba(255,255,255,.5) 80%, transparent 80%);
transition: left 1s, opacity 1s;
opacity: 0;
}
.shining-button:hover { background-color: #0073aa; }
.shining-button.shine::before {
left: 100%;
opacity: 1;
}
</style>
</head>
<body>
<a href="https://example.com" class="shining-button">클릭하세요</a>
<script>
document.addEventListener('DOMContentLoaded', () => {
const button = document.querySelector('.shining-button');
setInterval(() => {
button.classList.toggle('shine');
}, 1500);
});
</script>
</body>
</html>
실행 방법
- 위 코드를 복사하여 메모장을 열어서 붙혀넣기 하고 html 문서로 저장합니다.(메모장 저장시 예: 파일이름-
button_test.html
, 파일형식-모든파일) - 저장한 폴더로 가서
button_test.html
파일을 클릭하여 버튼이 제대로 작동 및 원하는 모양인지 확인합니다.
이 코드를 통해 버튼이 오렌지색에서 푸른색으로 변경되며 사선 빛 애니메이션이 적용되는 모습을 확인할 수 있을 것입니다.
위를 포스트 본문에 적용해보면 아래와 같이 나오게 됩니다. 한번 클릭해서 코딩에 익숙해지려면 어떻게 하면 되는지 한번 살짝 보고 가시죠~ ^^
인공지능으로 코딩하기 – 익숙해지기 🤞정리하기
위에서 알려드린 대로 만든 버튼 애니메이션은 평상시에는 오렌지색 배경에 사선 빛이 지나가는 효과를 가지며, 마우스를 올리면 배경색이 푸른색으로 바뀌고 사선 빛 애니메이션이 계속되는 형태로 작동됩니다.
빛나는 버튼 구현을 통해 사용자의 시선을 더욱 효과적으로 끌 수 있습니다. 이런 워드프레스 디자인 처음 시도해보는 분들도 차근차근 따라 하시면 쉽게 구현할 수 있으니, 꼭 한 번 시도해보세요!
# 버튼 애니메이션 소스코드 해석 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shining Button Test</title>
<style>
.shining-button {
position: relative; /* 버튼 내부에 위치한 요소를 상대적으로 배치 */
display: inline-block; /* 인라인 요소처럼 표시되지만, 블록 요소의 속성도 가짐 */
padding: 10px 20px; /* 버튼 내부의 여백 설정 */
font-size: 16px; /* 글자 크기 설정 */
color: #fff; /* 글자 색상 흰색으로 설정 */
background-color: #ff9800; /* 버튼 배경색을 오렌지색으로 설정 */
border: none; /* 테두리 제거 */
border-radius: 5px; /* 버튼 모서리를 둥글게 설정 */
overflow: hidden; /* 자식 요소가 버튼 영역을 벗어나지 않도록 설정 */
cursor: pointer; /* 마우스를 올리면 커서가 포인터로 변경 */
text-decoration: none; /* 링크의 밑줄 제거 */
transition: background-color .3s; /* 배경색 변경에 부드러운 전환 효과 설정 */
}
.shining-button::before {
content: ''; /* 가상 요소에 내용을 비워둠 */
position: absolute; /* 절대 위치로 배치 */
top: 0; /* 상단에 위치 */
left: -200%; /* 왼쪽 밖으로 시작 위치 설정 */
width: 200%; /* 가로 길이를 두 배로 설정 */
height: 100%; /* 버튼의 높이와 동일하게 설정 */
transform: skewX(-45deg); /* X축을 기준으로 45도 기울이기 */
background: linear-gradient(135deg, transparent 75%, rgba(255,255,255,.5) 75%, rgba(255,255,255,.5) 80%, transparent 80%); /* 사선 빛 효과 설정 */
transition: left 1s, opacity 1s; /* 위치와 투명도 변화에 부드러운 전환 효과 설정 */
opacity: 0; /* 초기 투명도를 0으로 설정 */
}
.shining-button:hover {
background-color: #0073aa; /* 마우스를 올리면 배경색을 푸른색으로 변경 */
}
.shining-button.shine::before {
left: 100%; /* 가상 요소를 오른쪽으로 이동 */
opacity: 1; /* 투명도를 1로 설정하여 보이게 함 */
}
</style>
</head>
<body>
<a href="https://example.com" class="shining-button">클릭하세요</a> <!-- 링크가 걸린 버튼 -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const button = document.querySelector('.shining-button'); /* 클래스명이 shining-button인 요소 선택 */
setInterval(() => {
button.classList.toggle('shine'); /* 1.5초마다 shine 클래스를 추가/제거하여 애니메이션 실행 */
}, 1500); /* 1.5초마다 실행 */
});
</script>
</body>
</html>
더 많은 내용을 보시려는 분은 여기를 클릭해서 더 공부해 보세요. 이쪽 세계도 정말 어마어마 하네요.