웹솔루션개발 26년 노하우! 해피CGI의 모든것

이 CSS는 흔히 "스크롤 유도(Scroll Indicator)" 마우스 애니메이션을 만드는 코드입니다.페이지 상단에 마우스 모양과 아래쪽 화살표를 표시하여 사용자가 아래로 스크롤할 수 있음을 알려줍니다.html 소스입니다.css 소스입니다.화살표가 순차적으로 깜빡여서 사용자에게 아래로 스크롤 이라는 시각적 신호를 주세 됩니다.첨부파일 또는 해당 사이트에서 전체 소스를 확인할 수 있습니다.

사이트 우측에 항상 떠있는 버튼 인터페이스 입니다.화면 오른쪽 아래에 큰 원형 버튼이 있고, 마우스를 올리면 여러 개의 작은 버튼이 위로 펼쳐지는 구조입니다.html 소스입니다.css 소스입니다.모든 버튼이 동시에 나오지 않고 순차적으로 나옵니다.해당 사이트 또는 첨부 파일을 다운로드 받으시면 전체 소스를 확인할 수 있습니다.

마우스를 올리면 화살표가 생기는 버튼 호버 효과입니다. 다양한 사이트에서 응용 가능합니다. HTML 구조 Hover Hover CSS(SCSS) 소스* { box-sizing: border-box; margin: 0; padding: 0;} body { width: 100%; height: 100vh; display: flex; overflow: hidden;} .btn-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: var(--bg); &:nth-child(1) { --btn-bg: #d..

마우스 오버 시 버튼 디자인이 바뀌는 코드입니다.카드 디자인으로 다이나믹한 사이트를 제작할 때 유용할거 같습니다.자세한 내용은 데모를 참고해 주시기 바랍니다.HTML Start Favorite Confirm Settings CSS:root { --bg: #0f1724; --accent1: #06b6d4; --accent2: #7c3aed; --accent3: #f59e0b; --accent4: #10b981; --light: #..

버튼 디자인으로 마우스 오버 시 버튼 배경이 바뀌는 애니메이션이 있습니다.HTML, CSS, JS로 제작되었습니다.자세한 내용은 데모를 확인해 주시기 바랍니다. HTML Squircle Long Squircle Button OKCSSbody { height: 100svh; display: grid; place-items: center; background: #faffec;} @property --bg-rotate { syntax: ''; initial-value: 0deg; inherits: false;} JS// technique pulled from:// https://www.simeongriggs.dev/responsive-extendable-squircles-with-sv..

스위치 형태의 토글 버튼입니다.클릭시 자연스러운 애니메이션 효과가 있습니다.css를 조절하여 에니메이션 효과를 간단하게 수정할 수 있습니다.첨부파일을 다운로드 받거나 해당 사이트에서 전체 html,css 소스를 다운로드 받을수 있습니다.

클릭 시 다양한 효과가 적용되는 탭바 애니메이션입니다.하이라이팅, 컬러 변경, 상황에 따라 버튼이 추가되기도 합니다.응용하여 다양하게 활용 가능합니다.HTML 구조                                          New                                                Popular                                                Following                                                                                                           https://images.pexels.com/photos/37569..

클릭하면 움직이는 아이콘과 메뉴가 나타나는 서치 효과입니다.응용하여 다양한 사이트의 메뉴로 사용할 수 있습니다.HTML 구조 Click Me!  CSS 소스html, body { height: 100%; width: 100%; margin: 0; overflow: hidden; background: #F3F7FF; } .shape { position: absolute; width: 50px; height: 50px; transform: scale(0.8); } .cir { position: absolute; border-radius: 50%; z-index: 5; } .btn-contain { width: 200px; height: 100p..

CSS로만 작동하는 애니메이션 버튼입니다.버튼 하단 라인에 네온의 무지개색 라인으로 애니메이션이 작동하며마우스 오버시 색변화가 빠르게 진행됩니다.자세한 내용은 데모사이트 주소에서 확인이 가능합니다.

css로만 구현된 다양한 버튼 디자인입니다. 다양한 에니메이션 효과가 있어 버튼을 강조할때 유용하게 사용이 가능합니다. css를 변경하여 쉽게 커스텀이 가능합니다. 해당 사이트 또는 첨부파일을 다운로드 받아서 소스를 확인할 수 있습니다.