简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집> 웹 프론트엔드> CSS 튜토리얼> 본문

빛나는 버튼 효과를 얻기 위한 CSS(코드 예)

不言
풀어 주다： 2018-11-20 11:32:49
원래의
9466명이 탐색했습니다.

우리는 버튼 효과를 자주 사용합니다. 이 글에서는 CSS를 사용하여 빛나는 버튼 효과를 구현하는 방법을 알려드리겠습니다.

자세히 코드를 살펴보겠습니다.

다음 코드는 모든 버튼 스타일의 기본 코드입니다.

HTML

Button
로그인 후 복사

CSS

.button { width:80px; height:20px; display: block; padding: 1em 3.2em; border-radius: 1.6em; color: #fff; font-size: 18px; font-family: 'Lato', sans-serif; font-weight: 700; text-align: center; text-decoration: none; }
로그인 후 복사

기본 색상은 아래 버튼 1에서 버튼 4로 변경되었으며, box-shadow를 통해 버튼 본체의 색상 투과율을 조정하여 각 버튼에 사용되는 그림자를 표현합니다. 버튼5부터 그라데이션 효과를 적용한 버튼 디자인을 시작해 보세요. 구체적인 코드 구현을 살펴보겠습니다.

button1:

.button { background-color: rgba(252, 28, 143, 1); box-shadow: 0 5px 20px rgba(252, 28, 143, .5); }
로그인 후 복사

효과는 다음과 같습니다.

빛나는 버튼 효과를 얻기 위한 CSS(코드 예)

button2:

.button{ background-color: rgba(251, 152, 11, 1); box-shadow: 0 5px 20px rgba(251, 152, 11, .5); }
로그인 후 복사

효과는 다음과 같습니다.

빛나는 버튼 효과를 얻기 위한 CSS(코드 예)

button3:

.button { background-color: rgba(241, 196, 15, 1); box-shadow: 0 5px 20px rgba(241, 196, 15, .5); }
로그인 후 복사

효과는 다음과 같습니다.

빛나는 버튼 효과를 얻기 위한 CSS(코드 예)

button4: 

.button { background-color: rgba(0, 63, 255, 1); box-shadow: 0 5px 20px rgba(0, 63, 255, .5); }
로그인 후 복사

효과는 다음과 같습니다.

빛나는 버튼 효과를 얻기 위한 CSS(코드 예)

button5:


기본 모양은 "button4"이며, box-shadow는 그림자를 설정하여 아래에 붙은 그림자의 위치를 변경합니다. 

.button { background-color: rgba(0, 63, 255, 1); box-shadow: 0 0 40px rgba(0, 63, 255, .7); }
로그인 후 복사

효과는 다음과 같습니다:

빛나는 버튼 효과를 얻기 위한 CSS(코드 예)

button6:

이것은 inset에서 지정한 "button4" 위치에 추가한 상자 그림자입니다. 

.button { background-color: rgba(0, 63, 255, 1); box-shadow: 0 5px 20px rgba(0, 63, 255, .5), 0 0 40px rgba(255, 255, 255, .5) inset; }
로그인 후 복사

효과는 다음과 같습니다.


빛나는 버튼 효과를 얻기 위한 CSS(코드 예)

button7:

그라디언트 유형의 버튼을 사용하여 다양한 색상을 결합하고 각도를 조정하세요. 

.button { background: linear-gradient(-45deg, rgba(87, 225, 181, 1) 0%, rgba(0, 63, 255, 1) 100%); box-shadow: 0 5px 20px rgba(0, 63, 255, .5); }
로그인 후 복사
효과는 다음과 같습니다.


빛나는 버튼 효과를 얻기 위한 CSS(코드 예)

위는 이 기사의 전체 내용입니다. 더 많은 흥미로운 콘텐츠를 보려면

CSS Video Tutorial및CSS3 Video Tutorial열을 참조하세요. PHP 중국어 웹사이트의 비디오 튜토리얼 칼럼! ! !

위 내용은 빛나는 버튼 효과를 얻기 위한 CSS(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
css
원천：php.cn
이전 기사：CSS 텍스트의 줄 간격을 설정하는 방법은 무엇입니까? CSS에서 줄 간격을 설정하는 방법 다음 기사：CSS3에서 그래디언트 속성을 사용하여 배경 그래디언트 효과를 만드는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
WordPress 6.0(add_editor_style)은 Gutenberg 편집기에서 style.css를 로드하지 않습니다. 저는 맞춤형 WordPress 블록 테마를 만들기 위해 UdemyWordPress 과정을 수강하고 있습니다. function.php에 블록 유형을 성공적으로 등록...
에서 2023-11-12 20:37:50
0
2
261
큰 숫자에서는 작동하지 않는 소수의 CSS 선행 0 최근에 100개가 넘는 목록 항목이 포함된 순서가 지정된 목록을 생성하는 문제에 직면했습니다. 나는 list-style:decimal-leading-zero;ol...
에서 2023-11-07 10:35:53
0
1
236
Sass 오류: 파일이 이미 로드되었습니다: @import '~src/css/quasar.variables.scss', 'quasar/src/css/variables.sass'; src\css\quasar.variables.scss 저는 퀘이사 프레임워크를 사용하고 있으며 프로젝트를 컴파일하는 동안 위의 오류 모듈 빌드 실패(./node_modules/sass-loader/dist/cjs.j...
에서 2023-11-06 21:38:55
0
1
219
HTML/CSS에 배경 비디오를 삽입하는 방법은 무엇입니까? 안녕하세요 여러분, 최근에 문제가 발생했습니다. 내 웹사이트에 비디오 배경을 설정하려고 하는데 중앙에 있는 텍스트가 맨 아래까지 계속 실행됩니다. 이유는 모르겠지...
에서 2023-11-06 13:59:13
0
1
240
JavaScript에서 색상이라는 CSS/HTML의 RGB 값을 얻는 방법 [name-rgb]라는 Javascript 개체를 만들었습니다. 기본: 명명된Colors={AliceBlue:[240,248,255],AntiqueWhite:[2...
에서 2023-11-06 09:05:50
0
2
210
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！