아름다운 CSS 버튼을 만드는 10가지 코드 조각

巴扎黑
풀어 주다: 2017-04-29 13:39:37
원래의
6017명이 탐색했습니다.

CSS 버튼의 고품질 예시를 찾고 있다면 이 글이 도움이 될 것입니다. 이 글에서는 웹 프로젝트에 적용할 수 있도록 코드 조각과 함께 CodePen의 고유한 CSS 버튼 10개 컬렉션을 수집했습니다.

웹 디자이너는 멋진 버튼을 만들기 위해 더 이상 Photoshop에 의존할 필요가 없습니다. CSS3를 사용하면 배경 그라데이션, 그림자 및 광택/반짝이는 효과를 얻을 수 있습니다.

1. 플라스틱 단추

아름다운 CSS 버튼을 만드는 10가지 코드 조각

이 버튼 세트는 매우 간단하고 깔끔합니다. 색상, 크기, 스타일이 다양하고 선택할 수 있는 소형, 중형, 대형 버튼이 제공되기 때문입니다. 따라서 쉽게 크기를 조정하거나 교체할 수 있습니다. 그리고 순수한 CSS 구현을 사용하면 인터넷에서 가장 간결하고 깔끔한 버튼 스타일 중 하나가 될 수도 있습니다.

코드주소 : [포털]

2. 멋진 버튼

아름다운 CSS 버튼을 만드는 10가지 코드 조각

펠리페 마르코스(Felipe Marcos)가 만든 멋진 버튼 세트입니다. 위의 플라스틱 버튼과는 약간 다르지만 사용하기도 쉽습니다. 반짝이는 플라스틱 디자인은 없지만 클릭하면 여전히 "밀어내는" 효과를 느낄 수 있습니다.

6가지 기본 디자인 색상 중에서 선택하거나 원하는 색상, 크기, 스타일을 맞춤 설정할 수 있습니다. 분류는 CSS 클래스 이름을 기반으로 하기 때문에 클래스의 기본 버튼 스타일과 색상을 설정할 수 있습니다.

코드주소 : [포털]

3. 구글 버튼

아름다운 CSS 버튼을 만드는 10가지 코드 조각

Google의 온라인 도구(예: Blogger, Cloud Drive, Gmail 및 검색 기능)에는 모두 다른 버튼 스타일이 있으며 개발자 Tim Wagner는 이러한 스타일을 이 펜에 복제했습니다.

저자는 Google 디자인에서 영감을 받아 순수 CSS3를 사용하여 이러한 멋진 버튼을 구현했습니다. 이와 유사한 또 다른 예는 Monkey Raptor가 만든 확장 버튼입니다. 그는 이 버튼에 대해 다른 믹싱을 수행했습니다.

코드주소 : [포털]

4. 버튼 묶음

아름다운 CSS 버튼을 만드는 10가지 코드 조각

이것은 CodePen에서 Alan Collins가 만든 플라스틱 기반 버튼 모음입니다. 다양한 색상과 다양한 스타일로 제공됩니다. 이 버튼 컬렉션 디자인의 독특한 점은 단 하나의 CSS 클래스로 부드러운 스타일과 플랫 스타일 사이를 전환할 수 있다는 것입니다. 매우 편리하지 않나요?

코드주소 : [포털]

5. 소셜 버튼

아름다운 CSS 버튼을 만드는 10가지 코드 조각

독특한 컬러배색과 브랜드 아이콘이 돋보이는 소셜버튼 모음입니다. 개발자 Stan Williams도 GitHub에 이 컬렉션을 출시했으며 버튼 색상과 스타일을 업데이트하고 유지 관리하고 있습니다. 현재 배경에 반짝이는 그라데이션이 있는 50개의 다양한 버튼으로 구성되어 있지만 품질은 모두 좋습니다.

웹사이트에 소셜 공유 버튼을 추가해야 한다면 이 순수 CSS 버튼 컬렉션이 좋은 선택입니다.

코드주소 : [포털]

6. 젤리 애니메이션

아름다운 CSS 버튼을 만드는 10가지 코드 조각

언뜻 보면 평범한 버튼이라고 생각할 수도 있습니다. 그러나 버튼을 클릭한 후에는 이 젤리 버튼에 클릭 이벤트에 바인딩된 특별한 애니메이션 효과가 있음을 알 수 있습니다.

재미있는 애니메이션 외에도 가장 인상적이었던 것은 버튼 아래의 그림자 디자인이었습니다. 함께 움직이는 버튼과 그림자의 디자인은 웹사이트나 소셜 네트워크를 시작하는 모든 사용자가 클릭하고 싶은 욕구를 더 쉽게 갖게 만듭니다.

코드주소 : [포털]

7. 시차버튼

아름다운 CSS 버튼을 만드는 10가지 코드 조각

이것은 Tobias Reich가 CSS3 방사형 그래디언트를 사용하여 구현한 시차 버튼입니다. 버튼의 전체 배경과 그림자는 순수한 CSS를 사용하여 구현되었으며 정말 인상적이었습니다. 그러나 Tobias는 또한 버튼을 가리키고 클릭할 때 시각적 왜곡 효과를 얻기 위해 일부 JavaScript를 사용했습니다.

이 버튼은 또한 제가 본 것 중 가장 진보된 버튼 효과 중 하나이며 어떤 웹 페이지에도 잘 어울립니다.

코드주소 : [포털]

8. 허브스팟 알약

아름다운 CSS 버튼을 만드는 10가지 코드 조각

이 버튼 세트는 Hubspot의 디자인을 기반으로 개발자 Joe Henriod가 만들었습니다. 기존 HTML 버튼과 유사하게 작동하지만 모든 요소에 적용할 수 있는 CSS 클래스로 제작되었습니다.

이 알약 버튼 세트는 빨간색과 파란색만 표시하지만 사용자 정의 색상도 지원합니다. 그리고 화려한 호버와 클릭 효과는 누구의 시선을 끌기에 충분합니다.

코드주소 : [포털]

9. 섹시한 SCSS 버튼

아름다운 CSS 버튼을 만드는 10가지 코드 조각

대부분의 프런트엔드 개발자는 작성하기 쉽고 개발자 생산성을 향상시킬 수 있는 Sass/SCSS를 사용하는 데 열중합니다.

SCSS로 구현한 버튼들은 내부와 외부 그림자 효과가 있으며, 디테일한 구성이 인상적입니다. 단일 클래스의 색상을 변경하고 자신만의 창의성을 혼합할 수도 있습니다.

페이지에 통합되면 버튼의 호버 및 활성 상태에도 3D 시각 감각이 적용됩니다.

이 버튼은 어떤 웹사이트에서든 비교적 쉽게 구현할 수 있으며 SCSS 코드를 CodePen에서 CSS 코드로 변환하여 사용할 수도 있습니다.

코드주소 : [포털]

10. Mozilla 스타일 버튼

아름다운 CSS 버튼을 만드는 10가지 코드 조각

Mozilla 웹사이트는 브랜드 변경을 거쳐 전통적인 플라스틱 디자인을 버렸지만 저는 원래 디자인이 마음에 들었습니다. 다행스럽게도 개발자 Felix Schwarzer는 자신의 코드를 사용하여 다시 한 번 디자인을 재현했습니다.

파란색 삼각형, 그라데이션 배경, 3D 경사가 모두 순수 CSS를 사용하여 생성된 것을 볼 수 있습니다. 이 버튼 세트의 디자인도 웅장함을 보여주며 사용자의 관심을 더 쉽게 끌 수 있습니다.

코드주소 : [포털]

요약

이 10개의 고유한 버튼 세트는 순수한 CSS3로 개발되었으며 크기, 색상 및 스타일을 변경하여 비즈니스, 블로그, 소셜 네트워크 또는 전자상거래 상점과 같은 프로젝트에 통합할 수 있습니다.

이 목록에 정리된 내용은 CodePen의 빙산의 일각에 불과합니다. 더 많은 리소스를 찾고 있다면 CodePen을 자주 검색해 보시면 더 많은 놀라움을 얻을 수 있을 것입니다.

읽어주셔서 감사합니다.

영어 원문: 아름다운 CSS 버튼을 만들기 위한 10가지 무료 코드 조각

번역주소: http://www.jianshu.com/p/430817f5adee

위 내용은 아름다운 CSS 버튼을 만드는 10가지 코드 조각의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿