AI 활용해서 블로그 버튼 1분 만에 만들기 (코드 & 서식 제공)

블로그에서 예쁜 버튼을 만들고 싶다면? CSS 코드 몇 줄이면 해결!
아래 코드와 방법을 따라 하면 AI 스타일 버튼을 1분 안에 만들 수 있어요! 🎨✨

---

🛠️ ChatGPT 스타일 블로그 버튼 만들기 (CSS 적용)

💡 방법: 아래 CSS 코드를 복사해서 블로그 HTML/CSS 편집기에 추가하면 끝!
💡 서식 코드의 숫자를 바꾸면 다양한 버튼을 추가할 수 있어요!

---

🎨 CSS 코드 (복사 & 붙여넣기)

아래 CSS 코드를 블로그 HTML/CSS 편집기에 추가하세요.
이 코드는 예쁜 둥근 버튼을 만들고, 마우스를 올리면 색상이 변하게 설정돼요.

 

여기에 들어가시고

 

 

이거 누르시고

 

 

CSS 누르시고 

 

맨 밑으로 스크롤 다운합니다! 

그리고 맨 아래에 아래 코드를 복붙합니다. 

 

/*** 버튼 스타일 ***/
.chatgpt-btn p {
    text-align: center;
}

.chatgpt-btn a {
    color: #ffffff !important;
}

.chatgpt-btn p a {
    padding: 0.6em 2.2em 0.6em!important;
    border-radius: 30px !important;
    margin: 10px 5px 10px 5px;
    color: #ffffff !important;
    display: inline-block;
    background: #007bff;  /* 💙 버튼 색상 (파란색) */
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s!important;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 1.1em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    box-shadow: 0em -0.3rem 0em rgb(0 0 0 / 10%) inset;
    position: relative;
}

.chatgpt-btn p a:hover {
    color: #ffffff;
    text-decoration: underline;
    background-color: #0056b3;  /* 💙 마우스 올릴 때 색상 */
    opacity: 0.9;
}

.chatgpt-btn p a:active {
    top: 2px;
    left: 2px;
    background-color: #003f7f;
    opacity: 0.9;
    box-shadow: 3px 3px 0 0 rgba(48, 48, 48, 0.2);
}

 

 

적용 누르시고 서식으로 갑니다. 

 

서식 쓰기를 누릅니다. 

 

 

HTML 으로 모드를 바꾸고 아래 코드를 복붙!

 

---

📝 블로그 버튼 서식 코드 (사용 방법)

📌 아래 서식 코드를 원하는 위치에 넣으면 버튼이 나타나요!
📌 "xxx.com" 부분을 원하는 링크로 변경하면 클릭하면 이동하는 버튼이 됩니다!

<div class="chatgpt-btn">
    <p><a href="https://xxx.com" target="_blank" rel="noopener">ChatGPT 버튼</a></p>
</div>

 

 

미리보기를 하시면 

 

이렇게 버튼이 생긴 것을 보실 수 있습니다!

 

ChatGPT 버튼

---

✨ 다양한 버튼 추가하는 방법! (숫자만 바꾸면 끝! 💡)

💡 버튼을 여러 개 추가하고 싶다면?
💡 클래스 이름과 숫자만 바꿔서 추가하면 돼요!

CSS도 위에 동일하게 넣어줘야 합니다! (앞에 div class 코드도 수정해주셔야 합니다!) 

 

예시) 버튼을 2개 추가하고 싶다면?

<!-- 첫 번째 버튼 -->
<div class="chatgpt-btn1">
    <p><a href="https://xxx.com" target="_blank" rel="noopener">ChatGPT 버튼1</a></p>
</div>

<!-- 두 번째 버튼 -->
<div class="chatgpt-btn2">
    <p><a href="https://yyy.com" target="_blank" rel="noopener">ChatGPT 버튼2</a></p>
</div>

 

 

✨ 버튼 효과 주기

💡 버튼을 효과를 주고 싶다면?
CHAT GPT 활용해서 어떤 효과를 넣고 싶은지 코드와 함께 제공하면 작성해줍니다!! 

너무 쉽죠?! 그러면 여러 효과들도 추가할 수 있어요. 

 

그리고 버튼색은 CSS에서 바로 변경이 가능하십니다! 신기하죠?!

---

✅ 결론: AI 버튼을 1분 만에 만들자!

✔ CSS 코드 + 서식 코드만 복사하면 블로그에 버튼 추가 끝!
✔ 색상, 크기, 스타일은 원하는 대로 변경 가능!
✔ 숫자 바꿔서 버튼 여러 개 추가 가능!

 

💬 여러분의 블로그에서 직접 활용해보세요! 😊
📌 궁금한 점은 댓글로 질문 주세요! 💬🚀