Attention All: The Secret to Animating Buttons That Stand Out (feat. WordPress)
The first impression of your site has a huge impact on users, and a catchy button animation in particular draws attention to itself, which may lead visitors to click on it out of curiosity.
But what can you do to make your buttons stand out? Today we're going to take a look at the Button for a diagonal light animation effectand how to make it stand out from the crowd.
In this post, you'll learn how to bring the buttons you use in WordPress to life. Using HTML, CSS, and JavaScript, we'll go into enough detail to make it easy for beginners to follow along and create glowing buttons, so be sure to read on!
This post introduces code that can be applied to the main body of WordPress, so please be careful if you don't have the relevant skills. We recommend that you copy and save the post as a draft to avoid the risk of deleting or changing the existing post.
For those of you in a hurry, we'll summarize. Paste the code from #2 into "Additional CSS" and insert "user html" in the desired body location, followed by the code from #1 and #3.(I'll explain below how to do this in a code editor, not in 'userhtml').
Step 3 Animate the button
1. create a button
First, add the button to the body of WordPress.
Tap the three-dot button in the top right corner to Code editorwill switch to HTML mode (Ctrl + Shift + Alt + M keyboard shortcut).
From there, copy and paste the code below wherever you want.
<a href="https://example.com" class="shining-button">Click on</a>This code creates a simple button with the text "Click here". When clicked, it's supposed to take you to example.com.
You can change the text content of the button to whatever you want, such as "Learn more", and the link address to whatever you want.
2. apply CSS styles
Now let's add styles and animations for the button.
Add the CSS code below to the Custom CSS editor in WordPress (Appearance > Customize > Additional CSS).
You can change the color according to your preference (currently: normal-orange, button-on-blue). The color part of the coloring is informed by the The art of "finding the right color" - from extracting colors from images to harmonious color matching Check out the post.
.shining-button {
position: relative;
display: inline-block;
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #ff9800; /* orange */
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;
}This CSS code sets a default style for the button, changes the background color from orange to blue when hovered over, and creates an oblique light animation effect.
3. Repeat the animation with JavaScript
If you want the animation to repeat periodically, you can use JavaScript. In the HTML mode of your code editor, add the code below to the code in #1 above.
<script>
document.addEventListener('DOMContentLoaded', () => {
const button = document.querySelector('.shining-button');
setInterval(() => {
button.classList.toggle('shine');
}, 1500);
});
</script>This script periodically calls the shine Repeat the animation by adding and removing classes.
setInterval function to set the animation to repeat every 1.5 seconds (1500).
Test locally before applying online
Before applying the button effect to WordPress, it's a good idea to test it locally (on your own computer) first.
You want to make sure that your post looks the way you want it to look beforehand. Follow the steps below to get started.
HTML file (complete)
<!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">Click on</a>
<script>
document.addEventListener('DOMContentLoaded', () => {
const button = document.querySelector('.shining-button');
setInterval(() => {
button.classList.toggle('shine');
}, 1500);
});
</script>
</body>
</html>How to run
- Copy the above code, open Notepad, paste it in and save it as an HTML document (when saving Notepad, ex: Filename-.
button_test.html, FileType-AllFiles) - Navigate to the folder where you saved the
button_test.htmlClick the file to verify that the button works and looks the way you want it to.
With this code, you should be able to see the button change from orange to blue and an oblique light animation applied.
If you apply the above to the body of the post, it will look like below. Let's take a look and see what you can do to familiarize yourself with coding~ ^^.
Coding with AI - Get familiar 🤞Organize
The button animation created as described above will normally have an orange background with a ray of light passing through it, and when you hover over it, the background color will change to blue and the ray animation will continue.
Implementing glowing buttons is a great way to grab your users' attention. Even if you're new to this kind of WordPress design, it's easy to implement if you follow along, so give it a try!
View the # Button Animation Source Code Interpretation
<!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">Click on</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>For more information, see the Hereto learn more, it's a big world out there.
