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

마우스 오버 시 버튼 디자인이 바뀌는 코드입니다.카드 디자인으로 다이나믹한 사이트를 제작할 때 유용할거 같습니다.자세한 내용은 데모를 참고해 주시기 바랍니다.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를 변경하여 쉽게 커스텀이 가능합니다. 해당 사이트 또는 첨부파일을 다운로드 받아서 소스를 확인할 수 있습니다.

별도의 JS, GIF없이 SVG아이콘으로 애니메이션 Loading Button을 만들 수 있는 소스입니다. Font Awesome과 같은 아이콘 라이브러리를 추가하고 아이콘을 HTML 버튼에 추가합니다. CSS로 버튼 모양을 만들어 줍니다. https://www.w3schools.com/howto/howto_css_loading_buttons.asp 해당 사이트를 참고하시면 로딩 버튼을 생성하는 방법을 자세히 확인할 수 있습니다.

버튼 클릭시 진행중 완료 상태 해당 사이트에서 소스 전체를 확인할 수 있습니다.

css와 자바스크립트를 이용해 제작된 뉴모피즘 스타일 버튼과 텍스트박스 입니다. 사용하고싶은 버튼의 css와 js 소스를 찾아서 적용할 수 있습니다.