스큐어모픽 반응 버튼
스큐어모픽 디자인 스타일의 좋아요 및 반응 버튼 세트로, 반응형 레이아웃과 다크 모드를 지원합니다. 버튼은 JavaScript 없이 HTML 및 Tailwind CSS로만 구현됩니다. 다크 모드는 CSS 클래스를 통해 처리됩니다. 자리 표시자 이미지는 아바타에 사용됩니다.
HTML 코드
<style>
.skeuomorphic {
background-color: #e0e0e0;
box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
border-radius: 10px;
padding: 10px;
}
.skeuomorphic:active {
box-shadow: inset 7px 7px 15px #bebebe, inset -7px -7px 15px #ffffff;
}
.dark .skeuomorphic {
background-color: #333;
box-shadow: 7px 7px 15px #222, -7px -7px 15px #444;
}
.dark .skeuomorphic:active {
box-shadow: inset 7px 7px 15px #222, inset -7px -7px 15px #444;
}
</style>
<div class="flex justify-center items-center space-x-4 p-6 bg-gray-100 dark:bg-black">
<div class="flex space-x-4 skeuomorphic dark:skeuomorphic">
<button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-500 dark:text-gray-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21c-.64-.149-1.28-.293-1.92-.434L13 18H4a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v4zm-2 0h2"
></path>
</svg>
<span class="text-gray-700 dark:text-gray-300">Like</span>
</button>
<button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-500 dark:text-gray-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
<span class="text-gray-700 dark:text-gray-300">Love</span>
</button>
<button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-500 dark:text-gray-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M14.828 14.828a4 4 0 01-5.656 0M9 21v-6a2 2 0 012-2h2a2 2 0 012 2v6m-6 0h6"
></path>
</svg>
<span class="text-gray-700 dark:text-gray-300">Haha</span>
</button>
<button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-500 dark:text-gray-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
></path>
</svg>
<span class="text-gray-700 dark:text-gray-300">Wow</span>
</button>
<button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-500 dark:text-gray-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
></path>
</svg>
<span class="text-gray-700 dark:text-gray-300">Sad</span>
</button>
<button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-500 dark:text-gray-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
<span class="text-gray-700 dark:text-gray-300">Angry</span>
</button>
</div>
</div>관련 구성 요소
Like/Reaction Buttons 컴포넌트
Glassmorphism 디자인 스타일의 Like/Reaction Buttons 컴포넌트로, Tailwind CSS를 사용하여 젖빛 유리 효과, 반응형 디자인, 어두운 테마 지원을 특징으로 합니다.
Like/Reaction Buttons 컴포넌트
마이크로 인터랙션이 있는 좋아요 및 반응 버튼을 특징으로 하는 웹 구성 요소이며 Tailwind CSS를 사용하여 어두운 테마를 지원합니다.
아날로그 다크 모드 좋아요/반응 버튼
복잡한 반응형 좋아요/반응 버튼 컴포넌트로, 다크 모드 UI와 유사한 색 구성표가 있는 포트폴리오로, 순수 HTML 및 Tailwind CSS를 사용하여 구현됩니다. Tailwind의 dark: 접두사를 통해 다크 모드를 지원합니다.