홈페이지 블로그를 아름답게 꾸며주는 CSS 버튼! HTML 32가지 정리모음
ㅁㅁㄸ에서 이번에 정리해드릴 정보는 ‘홈페이지 블로그를 아름답게 꾸며주는 CSS 버튼! HTML 32가지 정리모음’ 입니다.
다양한 정보를 전달해 드리려고 노력하는 블로그!!!
글과 사진 및 이미지 ▶ CopyLeft(C)
◎CopyLeft(C) 는 공유는 하시되 복사 붙여넣기가 아니라 내용을 응용하여 작성해서 가져가셔야 된다는 걸 알려 드립니다.
◎사진과 이미지 일부는 퍼온 것도 있음을 밝힙니다.
◎상단의 검색을 이용하면 좀 더 쉽게 검색가능합니다.
Sullivan Buttons
아이콘 CSS 애니메이션을 주어 활용할 수 있는 버튼입니다.
https://codepen.io/daviddarnes/pen/VLXxMa
See the Pen Sullivan Buttons by David Darnes (@daviddarnes) on CodePen.
10 Stylish Hover Effects with LESS
텍스트에 다양한 이펙트를 주어 활용할 수 있는 버튼입니다.
https://codepen.io/caraujo/pen/VYOjNM
See the Pen 10 stylish hover effects with less by Renan C. Araujo (@caraujo) on CodePen.
10 Stunning Hover Effects with SCSS
텍스트에 CSS를 다양하게 주어 효과를 주는 독특한 버튼입니다.
https://codepen.io/caraujo/pen/LVPzxO
See the Pen 10 stunning hover effects with scss by Renan C. Araujo (@caraujo) on CodePen.
Mana Button
CSS와 SVG를 활용하여 70 행정 코드에 의해 표현 된 거품 같은 애니메이션 버튼입니다.
https://codepen.io/visualcookie/pen/xdgzpJ
See the Pen Mana Button by Dean Hidri (@visualcookie) on CodePen.
CSS3 Hover Effects
배치형 버튼에 다양한 이펙트를 줄 수 있는 버튼입니다.
https://codepen.io/honglio/pen/FKyxG
See the Pen CSS3 Hover Effects by honglio (@honglio) on CodePen.
Pure CSS Click Effect
클릭시 버튼의 색이 바뀌는 버튼입니다.
https://codepen.io/doggard/pen/dXYzjW
See the Pen Pure CSS Click Effect by Dylan (@doggard) on CodePen.
CSS Overlay Navigation Animation
왼쪽 상단의 햄버거 메뉴를 클릭하면 메뉴버튼이 나오는 형식의 버튼입니다.
https://codepen.io/hexagoncircle/pen/OMJeja
See the Pen CSS Overlay Navigation Animation by Ryan Mulligan (@hexagoncircle) on CodePen.
Infinite Pagination
페이지 표시 버튼으로 사용 하면 좋을 애니메이션 같습니다. 계속 눌러보게 되네요
https://codepen.io/MarioD/pen/OmWaqz
See the Pen Infinite Pagination by Mariusz Dabrowski (@MarioD) on CodePen.
Twitter Heart
하트 모앙의 버튼입니다. 계속 마우스를 올려놓고 싶네요
https://codepen.io/donovanh/pen/dYqxNb
See the Pen Twitter Heart by Donovan Hutchinson (@donovanh) on CodePen.
Corner Share
오른쪽 하단에 종이를 넘기듯 링크를 만드는 버튼입니다.
https://codepen.io/nw/pen/zvXYBb
See the Pen Corner Share by Nathaniel Watson (@nw) on CodePen.
Social Share
버튼에 커서를 놓으면 SNS아이콘이 슬라이드로 나오는 버튼입니다.
https://codepen.io/supah/pen/MKNwZV
See the Pen Daily UI #010: Social Share by Fabio Ottaviani (@supah) on CodePen.
CSS Button Hover Effects with FontAwesome
버튼에 커서를 놓으면 숨겨진 화살표가 나오는 버튼입니다.
https://codepen.io/fox_hover/pen/bqZxLa
See the Pen CSS3 Button Hover Effects with FontAwesome by fox_hover (@fox_hover) on CodePen.
Cube Service Box
마우스 커서를 올려 놓으면 입체적으로 도는 버튼입니다.
https://codepen.io/rahuldhiman/pen/QKYwRz
See the Pen cube service box by RahulDhiman (@rahuldhiman) on CodePen.
CSS Parallax Orbs
마우스 커버를 버튼에 올려놓으면 애니메이션이 움직이는 버튼입니다.
https://codepen.io/jcoulterdesign/pen/OMOqjy
See the Pen CSS Parallax Orbs by Jamie Coulter (@jcoulterdesign) on CodePen.
Attractive Hover Effect
마우스의 커서가 움직이는 대로 움직이는 버튼입니다.
https://codepen.io/Mamboleoo/pen/XgBvrJ
See the Pen Attract hover effect by Louis Hoebregts (@Mamboleoo) on CodePen.
Presskit Download
버튼에 마우스 커서를 올려 놓으면 미리보기를 옆에 표시해주는 버튼입니다.
https://codepen.io/danoszz/pen/ORjGpa
See the Pen [Minimal Series] Presskit Download page by Daan (@danoszz) on CodePen.
Info on Hover
링크된 버튼위에 커서를 올려놓으면 툴팁용 설명이 나오는 버튼입니다.
https://codepen.io/tystrong/pen/rVJNrQ
See the Pen Info on Hover by Ty Strong (@tystrong) on CodePen.
Direction Aware 3D Hover Effect
썸네일이 마우스 방향대로 넘어가는 컨셉 디자인 버튼입니다.
https://codepen.io/noeldelgado/pen/pGwFx
See the Pen Direction-aware 3D hover effect (Concept) by Noel Delgado (@noeldelgado) on CodePen.
Material Design Box Shadow
구글의 디자인에 채용된 그림자 효과 버튼입니다.
https://codepen.io/sdthornton/pen/wBZdXq
See the Pen Material Design Box Shadows by Samuel Thornton (@sdthornton) on CodePen.
Card Hover Effects
사용하기 쉬운 카드형 오버효과 버튼입니다.
https://codepen.io/jasonheecs/pen/GNNwpZ
See the Pen Card hover effects by Jason Hee (@jasonheecs) on CodePen.
Hover Effect Pure CSS
썸네일에 커서를 올려나오면 입체적으로 올라오는 느낌의 버튼입니다.
https://codepen.io/havardob/pen/YZKwjQ
See the Pen Hover effect - Pure CSS by Håvard Brynjulfsen (@havardob) on CodePen.
Card Effect
화면 중앙에 표시되는 로고에 마우스 커서를 올려 놓으면 배경이 입체적으로 떠오르는 효과버튼입니다. 정말 이쁘네요!!!
https://codepen.io/MoorLex/pen/pRRzKx
See the Pen Card effect by Alex Moore (@MoorLex) on CodePen.
Hover Effects with CSS3
사진을 많이 사용하는 홈페이지나 블로그에 어울리는 사진 버튼입니다.
https://codepen.io/JacobStone/pen/GfLEn
See the Pen Hover effects with CSS3 by Jacob (@JacobStone) on CodePen.
CSS Image Hover Effects
CSS만으로 구현된 사진에 어울리는 버튼입니다. 축소, 확대, 블러등 여러가지 이펙트 버튼이 있습니다.
https://codepen.io/nxworld/pen/ZYNOBZ
See the Pen demo:CSS image hover effects by Naoya (@nxworld) on CodePen.
Image Hover 63 Effects
이미지에 커서를 올리면 나올 수 있는 이펙트는 63가지나 있는 버튼모음입니다.
https://codepen.io/maheshambure21/pen/kXwgyJ
See the Pen image hover 63 effects by Mahesh (@maheshambure21) on CodePen.
Imagehover.css - An Image Hover CSS Library
다양한 CCS로 만들어진 40가지 버튼모음입니다. 19KB로 표현되었다고 하네요.
https://codepen.io/littlesnippets/pen/VaeQmv
See the Pen Imagehover.css - An Image Hover CSS Library by LittleSnippets.net (@littlesnippets) on CodePen.
Wired Link Mixin
하이퍼 링크를 알기 쉽게 표현한 버튼입니다.
형관팬 느낌이 나네요
https://codepen.io/thomasvaeth/pen/bwwpVk
See the Pen Wired Link Mixin by Thomas Vaeth (@thomasvaeth) on CodePen.
Nice Line Movement
하이퍼링크에 커서를 놓으면 라인 애니메이션 작동되는 버튼입니다.
https://codepen.io/brunob182/pen/rWxYmW
See the Pen Nice line movement by Bruno Almeida (@brunob182) on CodePen.
CSS Animations for Links
하이퍼링크 버튼의 다양한 모음입니다.
https://codepen.io/melnik909/pen/BQBLoO
See the Pen CSS animations for links by Stas Melnikov (@melnik909) on CodePen.
Beautiful Navigation Hover Effects
4가지 종류의 버튼 모음입니다.
https://codepen.io/maheshambure21/pen/QwXaRw
See the Pen Beautiful navigation hover effects by Mahesh (@maheshambure21) on CodePen.
Button Hover Draw - CSS Only
하이퍼링크의 상자를 만들어주는 이펙트의 버튼입니다.
https://codepen.io/lukemeyrick/pen/apZOWm
See the Pen Button Hover Draw - CSS Only by Luke Meyrick (@lukemeyrick) on CodePen.
Button Hover Effects
다양한 애니메이션이 있는 버튼 모읍니다. 총 13개 스타일이 있습니다.
https://codepen.io/kjbrum/pen/wBBLXx
See the Pen Button Hover Effects by Kyle Brumm (@kjbrum) on CodePen.
그럼 ㅁㅁㄸ에서 정리한 오늘의 ‘홈페이지 블로그를 아름답게 꾸며주는 CSS 버튼! HTML 32가지 정리모음’ 소개를 마치도록 하겠습니다.
관련 글
블로그에 생동감을 주는 CSS 버튼을 달아보자!
웹 디자이너가 사용하면 좋을 크롬 확장프로그램 모음
2017년 아름다운 그라데이션을 사용자가 직접 만드는 grabient
%23%20%uD648%uD398%uC774%uC9C0%20%uBE14%uB85C%uADF8%uB97C%20%uC544%uB984%uB2F5%uAC8C%20%uAFB8%uBA70%uC8FC%uB294%20CSS%20%uBC84%uD2BC%21%20HTML%2032%uAC00%uC9C0%20%uC815%uB9AC%uBAA8%uC74C%0A@%28%24.%uBE14%uB85C%uADF8%20%uC11C%uC2DD%29%5BMarxico%2C%20%uD2F0%uC2A4%uD1A0%uB9AC%2C%20%u3141%u3141%u3138%5D%20%0A%0A%u3141%u3141%u3138%uC5D0%uC11C%20%uC774%uBC88%uC5D0%20%uC815%uB9AC%uD574%uB4DC%uB9B4%20%uC815%uBCF4%uB294%20%20%27%3Cfont%20color%3D%22%23831e1e%22%3E%3Cb%3E%uD648%uD398%uC774%uC9C0%20%uBE14%uB85C%uADF8%uB97C%20%uC544%uB984%uB2F5%uAC8C%20%uAFB8%uBA70%uC8FC%uB294%20CSS%20%uBC84%uD2BC%21%20HTML%2032%uAC00%uC9C0%20%uC815%uB9AC%uBAA8%uC74C%3C/font%3E%27%20%uC785%uB2C8%uB2E4.%0A%0A%0A----------%0A%3Cp%3E%3Cfont%20color%3D%22%23ffffff%22%3E%3Cspan%20style%3D%22background-color%3A%20rgb%28255%2C%2080%2C%2080%29%3B%20color%3A%20rgb%28255%2C%20255%2C%20255%29%3B%22%3E%uB2E4%uC591%uD55C%20%uC815%uBCF4%uB97C%20%uC804%uB2EC%uD574%20%uB4DC%uB9AC%uB824%uACE0%20%uB178%uB825%uD558%uB294%20%uBE14%uB85C%uADF8%21%21%21%3C/span%3E%3C/font%3E%3C/p%3E%0A%uAE00%uACFC%20%uC0AC%uC9C4%20%uBC0F%20%uC774%uBBF8%uC9C0%20%u25B6%20CopyLeft%28C%29%0A%u25CECopyLeft%28C%29%20%uB294%20%uACF5%uC720%uB294%20%uD558%uC2DC%uB418%20%uBCF5%uC0AC%20%uBD99%uC5EC%uB123%uAE30%uAC00%20%uC544%uB2C8%uB77C%20%uB0B4%uC6A9%uC744%20%uC751%uC6A9%uD558%uC5EC%20%uC791%uC131%uD574%uC11C%20%uAC00%uC838%uAC00%uC154%uC57C%20%uB41C%uB2E4%uB294%20%uAC78%20%uC54C%uB824%20%uB4DC%uB9BD%uB2C8%uB2E4.%20%0A%u25CE%uC0AC%uC9C4%uACFC%20%uC774%uBBF8%uC9C0%20%uC77C%uBD80%uB294%20%uD37C%uC628%20%uAC83%uB3C4%20%uC788%uC74C%uC744%20%uBC1D%uD799%uB2C8%uB2E4.%20%0A%u25CE%uC0C1%uB2E8%uC758%20%uAC80%uC0C9%uC744%20%uC774%uC6A9%uD558%uBA74%20%uC880%20%uB354%20%uC27D%uAC8C%20%uAC80%uC0C9%uAC00%uB2A5%uD569%uB2C8%uB2E4.%0A%0A%5BTOC%5D%0A%0A%3Cbr%3E%0A%0A----------%0A%21%5BAlt%20text%5D%28./%uD648%uD398%uC774%uC9C0%20%uBE14%uB85C%uADF8%uB97C%20%uC544%uB984%uB2F5%uAC8C%20%uAFB8%uBA70%uC8FC%uB294%20CSS%20%uBC84%uD2BC%21%20HTML%2032%uAC00%uC9C0%20%uC815%uB9AC%uBAA8%uC74C.png%29%0A%0A%3Cbr%3E%0A%0A%23%23%23%20Sullivan%20Buttons%0A%uC544%uC774%uCF58%20CSS%20%uC560%uB2C8%uBA54%uC774%uC158%uC744%20%uC8FC%uC5B4%20%uD65C%uC6A9%uD560%20%uC218%20%uC788%uB294%20%uBC84%uD2BC%uC785%uB2C8%uB2E4.%0Ahttps%3A//codepen.io/daviddarnes/pen/VLXxMa%0A%0A%23%23%23%2010%20Stylish%20Hover%20Effects%20with%20LESS%0A%uD14D%uC2A4%uD2B8%uC5D0%20%uB2E4%uC591%uD55C%20%uC774%uD399%uD2B8%uB97C%20%uC8FC%uC5B4%20%uD65C%uC6A9%uD560%20%uC218%20%uC788%uB294%20%uBC84%uD2BC%uC785%uB2C8%uB2E4.%20%0Ahttps%3A//codepen.io/caraujo/pen/VYOjNM%0A%0A%23%23%23%2010%20Stunning%20Hover%20Effects%20with%20SCSS%0A%uD14D%uC2A4%uD2B8%uC5D0%20CSS%uB97C%20%uB2E4%uC591%uD558%uAC8C%20%uC8FC%uC5B4%20%uD6A8%uACFC%uB97C%20%uC8FC%uB294%20%uB3C5%uD2B9%uD55C%20%uBC84%uD2BC%uC785%uB2C8%uB2E4.%20%0Ahttps%3A//codepen.io/caraujo/pen/LVPzxO%0A%0A%23%23%23%20Mana%20Button%0ACSS%uC640%20SVG%uB97C%20%uD65C%uC6A9%uD558%uC5EC%2070%20%uD589%uC815%20%uCF54%uB4DC%uC5D0%20%uC758%uD574%20%uD45C%uD604%20%uB41C%20%uAC70%uD488%20%uAC19%uC740%20%uC560%uB2C8%uBA54%uC774%uC158%20%uBC84%uD2BC%uC785%uB2C8%uB2E4.%0Ahttps%3A//codepen.io/visualcookie/pen/xdgzpJ%0A%0A%23%23%23%20CSS3%20Hover%20Effects%0A%uBC30%uCE58%uD615%20%uBC84%uD2BC%uC5D0%20%uB2E4%uC591%uD55C%20%uC774%uD399%uD2B8%uB97C%20%uC904%20%uC218%20%uC788%uB294%20%uBC84%uD2BC%uC785%uB2C8%uB2E4.%20%0Ahttps%3A//codepen.io/honglio/pen/FKyxG%0A%0A%23%23%23%20Pure%20CSS%20Click%20Effect%0A%uD074%uB9AD%uC2DC%20%uBC84%uD2BC%uC758%20%uC0C9%uC774%20%uBC14%uB00C%uB294%20%uBC84%uD2BC%uC785%uB2C8%uB2E4.%20%0Ahttps%3A//codepen.io/doggard/pen/dXYzjW%0A%0A%23%23%23%20CSS%20Overlay%20Navigation%20Animation%0A%uC67C%uCABD%20%uC0C1%uB2E8%uC758%20%uD584%uBC84%uAC70%20%uBA54%uB274%uB97C%20%uD074%uB9AD%uD558%uBA74%20%uBA54%uB274%uBC84%uD2BC%uC774%20%uB098%uC624%uB294%20%uD615%uC2DD%uC758%20%uBC84%uD2BC%uC785%uB2C8%uB2E4.%0Ahttps%3A//codepen.io/hexagoncircle/pen/OMJeja%0A%0A%23%23%23%20Infinite%20Pagination%0A%uD398%uC774%uC9C0%20%uD45C%uC2DC%20%uBC84%uD2BC%uC73C%uB85C%20%uC0AC%uC6A9%20%uD558%uBA74%20%uC88B%uC744%20%uC560%uB2C8%uBA54%uC774%uC158%20%uAC19%uC2B5%uB2C8%uB2E4.%20%uACC4%uC18D%20%uB20C%uB7EC%uBCF4%uAC8C%20%uB418%uB124%uC694%0Ahttps%3A//codepen.io/MarioD/pen/OmWaqz%0A%0A%23%23%23%20Twitter%20Heart%0A%uD558%uD2B8%20%uBAA8%uC559%uC758%20%uBC84%uD2BC%uC785%uB2C8%uB2E4.%20%uACC4%uC18D%20%uB9C8%uC6B0%uC2A4%uB97C%20%uC62C%uB824%uB193%uACE0%20%uC2F6%uB124%uC694%0Ahttps%3A//codepen.io/donovanh/pen/dYqxNb%0A%0A%23%23%23%20Corner%20Share%0A%uC624%uB978%uCABD%20%uD558%uB2E8%uC5D0%20%uC885%uC774%uB97C%20%uB118%uAE30%uB4EF%20%uB9C1%uD06C%uB97C%20%uB9CC%uB4DC%uB294%20%uBC84%uD2BC%uC785%uB2C8%uB2E4.%20%0Ahttps%3A//codepen.io/nw/pen/zvXYBb%0A%0A%23%23%23%20Social%20Share%0A%uBC84%uD2BC%uC5D0%20%uCEE4%uC11C%uB97C%20%uB193%uC73C%uBA74%20SNS%uC544%uC774%uCF58%uC774%20%uC2AC%uB77C%uC774%uB4DC%uB85C%20%uB098%uC624%uB294%20%uBC84%uD2BC%uC785%uB2C8%uB2E4.%20%0Ahttps%3A//codepen.io/supah/pen/MKNwZV%0A%0A%23%23%23%20CSS%20Button%20Hover%20Effects%20with%20FontAwesome%0A%uBC84%uD2BC%uC5D0%20%uCEE4%uC11C%uB97C%20%uB193%uC73C%uBA74%20%uC228%uACA8%uC9C4%20%uD654%uC0B4%uD45C%uAC00%20%uB098%uC624%uB294%20%uBC84%uD2BC%uC785%uB2C8%uB2E4.%20%0Ahttps%3A//codepen.io/fox_hover/pen/bqZxLa%0A%0A%23%23%23%20Cube%20Service%20Box%0A%uB9C8%uC6B0%uC2A4%20%uCEE4%uC11C%uB97C%20%uC62C%uB824%20%uB193%uC73C%uBA74%20%uC785%uCCB4%uC801%uC73C%uB85C%20%uB3C4%uB294%20%uBC84%uD2BC%uC785%uB2C8%uB2E4.%20%0Ahttps%3A//codepen.io/rahuldhiman/pen/QKYwRz%0A%0A%23%23%23%20CSS%20Parallax%20Orbs%0A%uB9C8%uC6B0%uC2A4%20%uCEE4%uBC84%uB97C%20%uBC84%uD2BC%uC5D0%20%uC62C%uB824%uB193%uC73C%uBA74%20%uC560%uB2C8%uBA54%uC774%uC158%uC774%20%uC6C0%uC9C1%uC774%uB294%20%uBC84%uD2BC%uC785%uB2C8%uB2E4.%0Ahttps%3A//codepen.io/jcoulterdesign/pen/OMOqjy%0A%0A%23%23%23%20Attractive%20Hover%20Effect%0A%uB9C8%uC6B0%uC2A4%uC758%20%uCEE4%uC11C%uAC00%20%uC6C0%uC9C1%uC774%uB294%20%uB300%uB85C%20%uC6C0%uC9C1%uC774%uB294%20%uBC84%uD2BC%uC785%uB2C8%uB2E4.%0Ahttps%3A//codepen.io/Mamboleoo/pen/XgBvrJ%0A%0A%23%23%23%20Presskit%20Download%20%0A%uBC84%uD2BC%uC5D0%20%uB9C8%uC6B0%uC2A4%20%uCEE4%uC11C%uB97C%20%uC62C%uB824%20%uB193%uC73C%uBA74%20%uBBF8%uB9AC%uBCF4%uAE30%uB97C%20%uC606%uC5D0%20%uD45C%uC2DC%uD574%uC8FC%uB294%20%uBC84%uD2BC%uC785%uB2C8%uB2E4.%20%0APagehttps%3A//codepen.io/danoszz/pen/ORjGpa%0A%0A%23%23%23%20Info%20on%20Hover%0A%uB9C1%uD06C%uB41C%20%uBC84%uD2BC%uC704%uC5D0%20%uCEE4%uC11C%uB97C%20%uC62C%uB824%uB193%uC73C%uBA74%20%uD234%uD301%uC6A9%20%uC124%uBA85%uC774%20%uB098%uC624%uB294%20%uBC84%uD2BC%uC785%uB2C8%uB2E4.%0Ahttps%3A//codepen.io/tystrong/pen/rVJNrQ%0A%0A%23%23%23%20Direction%20Aware%203D%20Hover%20Effect%0A%uC378%uB124%uC77C%uC774%20%uB9C8%uC6B0%uC2A4%20%uBC29%uD5A5%uB300%uB85C%20%uB118%uC5B4%uAC00%uB294%20%uCEE8%uC149%20%uB514%uC790%uC778%20%uBC84%uD2BC%uC785%uB2C8%uB2E4.%0Ahttps%3A//codepen.io/noeldelgado/pen/pGwFx%0A%0A%23%23%23%20Material%20Design%20Box%20Shadow%0A%uAD6C%uAE00%uC758%20%uB514%uC790%uC778%uC5D0%20%uCC44%uC6A9%uB41C%20%uADF8%uB9BC%uC790%20%uD6A8%uACFC%20%uBC84%uD2BC%uC785%uB2C8%uB2E4.%20%0Ahttps%3A//codepen.io/sdthornton/pen/wBZdXq%0A%0A%23%23%23%20Card%20Hover%20Effects%0A%uC0AC%uC6A9%uD558%uAE30%20%uC26C%uC6B4%20%uCE74%uB4DC%uD615%20%uC624%uBC84%uD6A8%uACFC%20%uBC84%uD2BC%uC785%uB2C8%uB2E4.%0Ahttps%3A//codepen.io/jasonheecs/pen/GNNwpZ%0A%0A%23%23%23%20Hover%20Effect%20Pure%20CSS%0A%uC378%uB124%uC77C%uC5D0%20%uCEE4%uC11C%uB97C%20%uC62C%uB824%uB098%uC624%uBA74%20%uC785%uCCB4%uC801%uC73C%uB85C%20%uC62C%uB77C%uC624%uB294%20%uB290%uB08C%uC758%20%uBC84%uD2BC%uC785%uB2C8%uB2E4.%0Ahttps%3A//codepen.io/havardob/pen/YZKwjQ%0A%0A%23%23%23%20Card%20Effect%0A%uD654%uBA74%20%uC911%uC559%uC5D0%20%uD45C%uC2DC%uB418%uB294%20%uB85C%uACE0%uC5D0%20%uB9C8%uC6B0%uC2A4%20%uCEE4%uC11C%uB97C%20%uC62C%uB824%20%uB193%uC73C%uBA74%20%uBC30%uACBD%uC774%20%uC785%uCCB4%uC801%uC73C%uB85C%20%uB5A0%uC624%uB974%uB294%20%uD6A8%uACFC%uBC84%uD2BC%uC785%uB2C8%uB2E4.%20%uC815%uB9D0%20%uC774%uC058%uB124%uC694%21%21%21%0Ahttps%3A//codepen.io/MoorLex/pen/pRRzKx%0A%0A%23%23%23%20Hover%20Effects%20with%20CSS3%0A%uC0AC%uC9C4%uC744%20%uB9CE%uC774%20%uC0AC%uC6A9%uD558%uB294%20%uD648%uD398%uC774%uC9C0%uB098%20%uBE14%uB85C%uADF8%uC5D0%20%uC5B4%uC6B8%uB9AC%uB294%20%uC0AC%uC9C4%20%uBC84%uD2BC%uC785%uB2C8%uB2E4.%20%0Ahttps%3A//codepen.io/JacobStone/pen/GfLEn%0A%0A%23%23%23%20CSS%20Image%20Hover%20Effects%0ACSS%uB9CC%uC73C%uB85C%20%uAD6C%uD604%uB41C%20%uC0AC%uC9C4%uC5D0%20%uC5B4%uC6B8%uB9AC%uB294%20%uBC84%uD2BC%uC785%uB2C8%uB2E4.%20%uCD95%uC18C%2C%20%uD655%uB300%2C%20%uBE14%uB7EC%uB4F1%20%uC5EC%uB7EC%uAC00%uC9C0%20%uC774%uD399%uD2B8%20%uBC84%uD2BC%uC774%20%uC788%uC2B5%uB2C8%uB2E4.%0Ahttps%3A//codepen.io/nxworld/pen/ZYNOBZ%0A%0A%23%23%23%20Image%20Hover%2063%20Effects%0A%uC774%uBBF8%uC9C0%uC5D0%20%uCEE4%uC11C%uB97C%20%uC62C%uB9AC%uBA74%20%uB098%uC62C%20%uC218%20%uC788%uB294%20%uC774%uD399%uD2B8%uB294%2063%uAC00%uC9C0%uB098%20%uC788%uB294%20%uBC84%uD2BC%uBAA8%uC74C%uC785%uB2C8%uB2E4.%0Ahttps%3A//codepen.io/maheshambure21/pen/kXwgyJ%0A%0A%23%23%23%20Imagehover.css%20-%20An%20Image%20Hover%20CSS%20Library%0A%uB2E4%uC591%uD55C%20CCS%uB85C%20%uB9CC%uB4E4%uC5B4%uC9C4%2040%uAC00%uC9C0%20%uBC84%uD2BC%uBAA8%uC74C%uC785%uB2C8%uB2E4.%2019KB%uB85C%20%uD45C%uD604%uB418%uC5C8%uB2E4%uACE0%20%uD558%uB124%uC694.%0Ahttps%3A//codepen.io/littlesnippets/pen/VaeQmv%0A%0A%0A%23%23%23%20Wired%20Link%20Mixin%0A%uD558%uC774%uD37C%20%uB9C1%uD06C%uB97C%20%uC54C%uAE30%20%uC27D%uAC8C%20%uD45C%uD604%uD55C%20%uBC84%uD2BC%uC785%uB2C8%uB2E4.%20%0A%uD615%uAD00%uD32C%20%uB290%uB08C%uC774%20%uB098%uB124%uC694%0Ahttps%3A//codepen.io/thomasvaeth/pen/bwwpVk%0A%0A%23%23%23%20Nice%20Line%20Movement%0A%uD558%uC774%uD37C%uB9C1%uD06C%uC5D0%20%uCEE4%uC11C%uB97C%20%uB193%uC73C%uBA74%20%uB77C%uC778%20%uC560%uB2C8%uBA54%uC774%uC158%20%uC791%uB3D9%uB418%uB294%20%uBC84%uD2BC%uC785%uB2C8%uB2E4.%20%0Ahttps%3A//codepen.io/brunob182/pen/rWxYmW%0A%0A%23%23%23%20CSS%20Animations%20for%20Links%0A%uD558%uC774%uD37C%uB9C1%uD06C%20%uBC84%uD2BC%uC758%20%uB2E4%uC591%uD55C%20%uBAA8%uC74C%uC785%uB2C8%uB2E4.%0Ahttps%3A//codepen.io/melnik909/pen/BQBLoO%0A%0A%23%23%23%20Beautiful%20Navigation%20Hover%20Effects%0A4%uAC00%uC9C0%20%uC885%uB958%uC758%20%uBC84%uD2BC%20%uBAA8%uC74C%uC785%uB2C8%uB2E4.%0Ahttps%3A//codepen.io/maheshambure21/pen/QwXaRw%0A%0A%23%23%23%20Button%20Hover%20Draw%20-%20CSS%20Only%0A%uD558%uC774%uD37C%uB9C1%uD06C%uC758%20%uC0C1%uC790%uB97C%20%uB9CC%uB4E4%uC5B4%uC8FC%uB294%20%uC774%uD399%uD2B8%uC758%20%uBC84%uD2BC%uC785%uB2C8%uB2E4.%0Ahttps%3A//codepen.io/lukemeyrick/pen/apZOWm%0A%0A%23%23%23%20Button%20Hover%20Effects%0A%uB2E4%uC591%uD55C%20%uC560%uB2C8%uBA54%uC774%uC158%uC774%20%uC788%uB294%20%uBC84%uD2BC%20%uBAA8%uC74D%uB2C8%uB2E4.%20%uCD1D%2013%uAC1C%20%uC2A4%uD0C0%uC77C%uC774%20%uC788%uC2B5%uB2C8%uB2E4.%0Ahttps%3A//codepen.io/kjbrum/pen/wBBLXx%0A%0A%23%23%23%20%0A%0A%0A%0A%3Cbr%3E%0A%0A%uADF8%uB7FC%20%u3141%u3141%u3138%uC5D0%uC11C%20%uC815%uB9AC%uD55C%20%uC624%uB298%uC758%20%20%27%3Cfont%20color%3D%22%23831e1e%22%3E%3Cb%3E%uD648%uD398%uC774%uC9C0%20%uBE14%uB85C%uADF8%uB97C%20%uC544%uB984%uB2F5%uAC8C%20%uAFB8%uBA70%uC8FC%uB294%20CSS%20%uBC84%uD2BC%21%20HTML%2032%uAC00%uC9C0%20%uC815%uB9AC%uBAA8%uC74C%3C/font%3E%27%20%20%uC18C%uAC1C%uB97C%20%uB9C8%uCE58%uB3C4%uB85D%20%uD558%uACA0%uC2B5%uB2C8%uB2E4.%20%0A%0A%0A----------%0A**%uAD00%uB828%20%uAE00**%0A%5B%uBE14%uB85C%uADF8%uC5D0%20%uC0DD%uB3D9%uAC10%uC744%20%uC8FC%uB294%20CSS%20%uBC84%uD2BC%uC744%20%uB2EC%uC544%uBCF4%uC790%21%5D%28http%3A//mmtt.kr/58%29%0A%5B%uC6F9%20%uB514%uC790%uC774%uB108%uAC00%20%uC0AC%uC6A9%uD558%uBA74%20%uC88B%uC744%20%uD06C%uB86C%20%uD655%uC7A5%uD504%uB85C%uADF8%uB7A8%20%uBAA8%uC74C%5D%28http%3A//mmtt.kr/119%29%0A%5B2017%uB144%20%uC544%uB984%uB2E4%uC6B4%20%uADF8%uB77C%uB370%uC774%uC158%uC744%20%uC0AC%uC6A9%uC790%uAC00%20%uC9C1%uC811%20%uB9CC%uB4DC%uB294%20grabient%5D%28http%3A//mmtt.kr/206%29
