아임웹 버튼 커스텀 코드: 트렌디한 인터랙션 버튼 만들기 [코드 무료 공유]

 

 

 

 

 

 

 

 

 

 

아임웹의 기본 버튼 디자인이 심심하게 느껴지셨나요?

이제 코드 위젯 하나만으로도 클릭하고 싶은 트렌디한 인터랙션 버튼을 구현할 수 있습니다.

이번에는 호버 시 배경이 확장되고 아이콘이 회전하는 커스텀 버튼 코드를 소개합니다. 브랜드 분위기나 제품 콘셉트에 맞게 활용하면 클릭률까지 높아지는 효과를 볼 수 있어요.

 

아임웹은 쉬운 홈페이지 제작 도구지만, 코드 위젯을 활용하면 훨씬 더 자유롭게 디자인을 커스터마이징할 수 있습니다.

이번 글에서는 아임웹에서도 간단히 활용할 수 있는 버튼 디자인 커스텀 코드를 소개합니다. 아래 코드를 복사해서 코드 위젯에 붙여넣기만 하면, 세련되고 트렌디한 버튼을 완성할 수 있어요

그러면 바로 공개하겠습니다! 

 

 

버튼 커스텀 디자인 코드 

아래 코드를 복사해서 아임웹 코드위젯에 붙여넣으시면 완료입니다!

버튼 코드 .txt

0.00MB

<style>
/* 버튼 전체 스타일 설정 */
.custom-button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 10px 28px !important;
  font-size: 17px !important;
  font-family: sans-serif !important;
  font-weight: 600 !important;
  color: #f8fafc !important;
  background-color: #0A0D2D !important;
  border: 2px solid transparent !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  overflow: hidden !important;
  z-index: 1 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

/* 호버 시 확장되는 원형 배경 */
.custom-button::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: -100% !important;
  width: 200% !important;
  height: 200% !important;
  background-color: #10b981 !important;
  border-radius: 50% !important;
  transform: translateY(-50%) scale(0) !important;
  transition: all 0.7s ease !important;
  z-index: -1 !important;
}

/* 호버 시 원이 커지며 배경처럼 확장 */
.custom-button:hover::before {
  left: 0 !important;
  transform: translateY(-50%) scale(1.5) !important;
}

/* 호버 시 텍스트 색상 유지 */
.custom-button:hover {
  color: #f8fafc !important;
}

/* 아이콘 스타일 설정 */
.custom-button svg {
  width: 32px !important;
  height: 32px !important;
  padding: 6px !important;
  border: 1px solid #374151 !important;
  border-radius: 9999px !important;
  background-color: #f8fafc !important;
  transition: transform 0.3s ease !important;
  transform: rotate(45deg) !important;
}

/* 호버 시 아이콘 회전 */
.custom-button:hover svg {
  transform: rotate(90deg) !important;
}

/* 모바일 반응형 최적화 */
@media (max-width: 768px) {
  .custom-button {
    font-size: 15px !important;
    padding: 10px 20px !important;
    gap: 10px !important;
  }

  .custom-button svg {
    width: 28px !important;
    height: 28px !important;
    padding: 4px !important;
  }
}
</style>

<!-- 버튼 링크 -->
<a href="https://example.com" class="custom-button">
  더 알아보기
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 19">
    <path
      fill="#1f2937"
      d="M7 18C7 18.5523 7.44772 19 8 19C8.55228 19 9 18.5523 9 18H7ZM8.70711 0.292893C8.31658 -0.0976311 7.68342 -0.0976311 7.29289 0.292893L0.928932 6.65685C0.538408 7.04738 0.538408 7.68054 0.928932 8.07107C1.31946 8.46159 1.95262 8.46159 2.34315 8.07107L8 2.41421L13.6569 8.07107C14.0474 8.46159 14.6805 8.46159 15.0711 8.07107C15.4616 7.68054 15.4616 7.04738 15.0711 6.65685L8.70711 0.292893ZM9 18L9 1H7L7 18H9Z"
    />
  </svg>
</a>

 

🔧 적용 방법 안내

1. 아임웹 관리자 페이지 접속

[디자인 모드 > 섹션 추가 > 코드 위젯 추가] 경로로 이동하세요.

2. 코드 붙여넣기
위 HTML+CSS 코드를 통째로 복사해 코드 위젯 안에 붙여넣습니다.

 

3. 링크 수정하기

<a href="https://example.com" class="custom-button">

이 부분의 https://example.com을 원하는 링크로 변경하면 됩니다.

 

4. 버튼 텍스트 변경
“더 알아보기” 문구를 자유롭게 바꿔보세요.
예: “구매하러 가기”, “신청하기”, “상세 보기”

---

🎨 어떤 페이지에 활용하면 좋을까?

• 상품 상세 설명 하단: CTA 버튼으로 전환률 높이기
• 브랜드 소개 영역: 비주얼 강조 효과
• 이벤트 페이지: 메인 클릭 버튼으로 주목도 극대화
• 포트폴리오/이력서 사이트: 전문성과 감성 모두 표현 가능

특히 이 버튼은 색상이나 아이콘만 바꿔도 전혀 다른 분위기를 연출할 수 있어, 다양한 브랜드 이미지에 적용할 수 있습니다.

---

💡 디자인 팁: 내 브랜드에 맞게 색상만 바꿔도 OK

• 배경색 변경: .custom-button 내 background-color
• 호버 색상 변경: .custom-button::before 내 background-color
• 아이콘 색상: <path fill="#1f2937"> 부분 수정

색상 추천 사이트: https://coolors.co

Coolors - The super fast color palettes generator!

 

마무리하며

코드를 몰라도, 복사-붙여넣기만 하면 완성되는 아임웹 버튼 커스터마이징!
디자인의 디테일을 살리는 것이 방문자의 행동을 이끄는 열쇠가 될 수 있습니다.

직접 적용해보시고, 더 다양한 변형이 궁금하다면 댓글이나 메시지로 요청해 주세요!

 

함께 읽으면 좋은 글 

아임웹 둥둥 떠다니는 애니메이션 코드