워드프레스를 이용해 블로그를 운영하시는 분들이 많습니다. 블로그에 글을 작성할 때 링크에 버튼 효과를 주는 경우가 많은데요. 이 글에서는 워드프레스에서 링크에 3D 버튼 효과와 빛이 흐르는 효과를 적용하는 방법을 알아보겠습니다.
워드프레스에서 링크에 3D 버튼 효과와 빛이 흐르는 효과 적용 방법
워드프레스를 이용해 블로그를 운영하시는 분들이 많을 텐데요. 블로그 글을 작성할 때 링크를 사용하는 경우가 많습니다. 이때, 링크를 보기 좋게 꾸미는 방법 중 하나로 3D 버튼 효과와 빛이 흐르는 효과를 줄 수 있습니다.
먼저, 버튼에 적용할 색상을 선택해야 합니다. 아래 링크에서 원하는 색상의 코드를 확인할 수 있습니다.
저는 파란색 계열을 선택했지만, 다른 색상을 원하시면 .wave-effect 클래스에서 color:white; 와 background: linear-gradient(145deg, #3498db, #2980b9); 부분을 수정하시면 됩니다.
아래는 몇 가지 색상을 설정하는 예시입니다.
.wave-effect {
color: black; /* 글자색을 검정으로 변경 */
background: #ff6b6b; /* 배경을 빨간색 계열로 변경 */
}
.wave-effect {
color: yellow; /* 글자색을 노란색으로 변경 */
background: linear-gradient(145deg, #ff6b6b, #e74c3c); /* 빨간색 계열 그라데이션 */
}
/* 파란색 계열 */
.wave-effect {
color: white;
background: linear-gradient(145deg, #3498db, #2980b9);
}
/* 초록색 계열 */
.wave-effect {
color: white;
background: linear-gradient(145deg, #2ecc71, #27ae60);
}
/* 보라색 계열 */
.wave-effect {
color: white;
background: linear-gradient(145deg, #9b59b6, #8e44ad);
}
/* 주황색 계열 */
.wave-effect {
color: white;
background: linear-gradient(145deg, #e67e22, #d35400);
}
/* 회색 계열 */
.wave-effect {
color: white;
background: linear-gradient(145deg, #95a5a6, #7f8c8d);
}
링크와 버튼에 3D 버튼 효과와 빛이 흐르는 효과를 주는 전체 CSS 코드는 아래와 같습니다.
/* 버튼과 링크에 공통으로 적용될 스타일 */
.wave-effect {
position: relative;
padding: 10px 32px;
font-size: 15px;
color: white;
background: linear-gradient(145deg, #3498db, #2980b9);
border: none;
border-radius: 6px;
cursor: pointer;
overflow: hidden;
transition: all 0.3s ease;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.2),
inset 0 -3px 6px rgba(0, 0, 0, 0.3),
inset 0 3px 6px rgba(255, 255, 255, 0.3);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
transform: translateY(0);
font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
white-space: nowrap;
min-width: 300px;
display: inline-block; /* 링크와 버튼 모두에 적용하기 위해 inline-block 사용 */
text-decoration: none; /* 링크의 밑줄 제거 */
text-align: center; /* 텍스트 중앙 정렬 */
}
.wave-effect:hover {
transform: translateY(-2px);
box-shadow:
0 6px 12px rgba(0, 0, 0, 0.3),
inset 0 -3px 6px rgba(0, 0, 0, 0.3),
inset 0 3px 6px rgba(255, 255, 255, 0.3);
color: white; /* 링크 호버 시에도 텍스트 색상 유지 */
}
.wave-effect:active {
transform: translateY(1px);
box-shadow:
0 3px 6px rgba(0, 0, 0, 0.2),
inset 0 -2px 4px rgba(0, 0, 0, 0.3),
inset 0 2px 4px rgba(255, 255, 255, 0.3);
}
.wave-effect::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0.4),
rgba(255, 255, 255, 0.2),
transparent
);
transform: translateX(-100%);
animation: wave 2s infinite;
}
@keyframes wave {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
위의 코드를 워드프레스에 적용하려면, 워드프레스 관리자 화면에서 ‘모양’ → ‘테마 파일 편집기’ → ‘style.css’를 순서대로 클릭합니다.
‘style.css’ 파일에 위의 코드를 복사해서 붙여넣은 후, ‘파일 업데이트’를 클릭하면 적용됩니다.
이제 버튼에 3D와 빛이 흐르는 효과를 주는 코드를 추가했습니다. 이 코드를 사용하는 방법은 아래와 같습니다.
블록 편집기에서 링크를 추가한 후, 오른쪽 사이드바에서 ‘고급’을 클릭하고 추가 CSS 클래스에 wave-effect 를 입력하면 적용됩니다.
적용한 결과는 아래와 같습니다.
오늘은 워드프레스에서 링크에 3D 버튼 효과와 빛이 흐르는 효과를 적용하는 방법에 대해 알아보았습니다. 링크를 더 효과적으로 꾸미고 싶으신 분들은 이 글을 참고하셔서 적용해 보시기 바랍니다.