CSS3 자습서 매끄러운 온 / 오프 버튼 만들기
버튼을 사용하는 것은 지금까지 전자 제품과 상호 작용하는 데 선호되는 방법입니다. 라디오, TV, 음악 플레이어 및 심지어 음성 명령 기능이있는 스마트 폰의 경우에도 적어도 하나 또는 두 개의 물리적 버튼이 필요합니다..
게다가,이 디지털 시대에, 단추 디지털 형태로 진화하여 물리적 인 버튼에 비해 인터랙티브하고 역동적이며 실제 제작이 쉽습니다..
이번에는 CSS 만 사용하여 Dribbble에서 우수한 디자인을 기반으로하는 매끄럽고 대화식 버튼을 만들 계획입니다..
글쎄, 시작하자..
HTML
HTML 문서에 다음 마크 업을 추가하여 버튼을 시작합니다. 정말 간단합니다. 버튼은 앵커 태그를 기반으로합니다. 스팬 옆에 표시등을 만들면 HTML5 안에 함께 표시됩니다. 섹션 꼬리표.
& # xF011;
다음은 버튼의 초기 모습입니다..
기본 스타일링
이 섹션에서 우리는 스타일.
먼저 어두운 배경을 신체의 문서에있는 Subtle Pattern에서 적용하고 섹션. 그런 다음 점선으로 된 점을 제거합니다. 개요 그 위에 :초점 과 :유효한 링크.
body background : url ( 'images / micro_carbon.png'); section margin : 150px auto 0; 너비 : 75px; 높이 : 95px; 위치 : 상대적; 텍스트 정렬 : 가운데; : 활성, : 초점 개요 : 0;
사용자 정의 글꼴 사용
버튼의 아이콘은 이미지가 아닌 글꼴 썸네일의 맞춤 글꼴을 사용합니다. 스타일 시트를 통해 아이콘을 쉽게 스타일이 가능하고 확장 할 수 있습니다..
글꼴을 다운로드하고 글꼴 파일 (eot, woff, ttf 및 svg)을 글꼴 폴더에 추가 한 다음 스타일 시트에 다음 코드를 추가하여 새 글꼴 패밀리를 정의하십시오.
@ font-face font-family : "FontAwesome"; src : url ( "fonts / fontawesome-webfont.eot"); url ( "fonts / fontawesome-webfont.woff") 형식 ( 'woff'), url ( "font / fontawesome-webfont.woff" webfont.ttf ") 형식 ( 'truetype'), url ("글꼴 / fontawesome-webfont.svg # FontAwesome ") 형식 ( 'svg'); font-weight : normal; 글꼴 스타일 : 일반; 
그만큼 전원 아이콘 이 버튼에 필요한 것은 유니 코드 번호로 표현됩니다. F011; 위의 HTML 마크 업을 자세히 살펴보면이 숫자 문자를 넣었습니다. & # xF011; 앵커 태그 내에 있지만 사용자 정의가 정의되지 않았으므로 글꼴 모음 단추 스타일에서는 아이콘이 아직 올바르게 렌더링되지 않습니다..
추가 읽기 : 유니 코드 및 HTML : 문서 문자
버튼 스타일 지정하기
우선, 사용자 정의를 정의해야합니다. 글꼴 모음 버튼 용.
우리의 버튼은 원이 될 것입니다, 우리는 원을 사용하여 효과를 얻을 수 있습니다. 국경 - 반경 속성을 선택하고 버튼의 절반 이상에서 값을 설정합니다. 폭.
아이콘에 글꼴을 사용하고 있기 때문에 쉽게 아이콘을 설정할 수 있습니다. 색깔 추가 텍스트 그림자 스타일 시트의 아이콘에 대해서도.
다음으로 버튼에 경 사진 효과를 만듭니다. 이 효과는 매우 까다 롭습니다. 첫째, 우리는 배경색 : rgb (83,87,93); 버튼의 색상 기반에 대해 최대 4 개의 레이어를 추가합니다. 박스 그림자.
a font-family : "FontAwesome"; 색상 : rgb (37,37,37); 텍스트 그림자 : 0px 1px 1px rgba (250,250,250,0.1); 글꼴 크기 : 32pt; 디스플레이 : 블록; 위치 : 상대적; 텍스트 장식 : 없음; 배경색 : rgb (83,87,93); 상자 그림자 : 0px 3px 0px 0px rgb (34,34,34), / * 첫 번째 그림자 * / 0px 7px 10px 0px rgb (17,17,17), / * 1nd 그림자 / 삽입 0px 1px 1px 0px rgba (250 , 250, 250, .2), / * 세번째 그림자 * / 인 세트 0px -12px 35px 0px rgba (0, 0, 0, 0.5); / * 4 차 그림자 * / 너비 : 70px; 높이 : 70px; border : 0; border-radius : 35px; 텍스트 정렬 : 가운데; 줄 높이 : 79px;
버튼의 바깥쪽에 큰 원이 있으며 우리는 :전에 의사 요소 추가 마크 업을 추가하는 대신.
a : before content : ""; 너비 : 80px; 높이 : 80px; 디스플레이 : 블록; z- 지수 : -2; 위치 : 절대; 배경색 : rgb (26,27,29); 왼쪽 : -5px; 상단 : -2px; border-radius : 40px; 상자 그림자 : 0px 1px 0px 0px rgba (250,250,250,0.1), 삽입 0px 1px 2px rgba (0, 0, 0, 0.5);
추가 읽기 : CSS : before와 : after 의사 요소 (Hongkiat.com)
표시 등
이 버튼 아래에는 전원 켜기 / 끄기 상태를 지정하는 작은 표시등이 있습니다. 아래에서 전원이 처음에 꺼져 있기 때문에 광원의 색상에 빨간색을 적용합니다. 상자 그림자 빛의 빛나는 효과를 모방하다.
a + span 디스플레이 : 블록; 너비 : 8px; 높이 : 8px; 배경색 : rgb (226,0,0); 상자 그림자 : 인 세트 0px 1px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rgba (226,0,0,0.5); border-radius : 4px; 명확 : 둘 다; 위치 : 절대; 하단 : 0; 왼쪽 : 42 %;
그 효과
이 시점에서 버튼의 모양이 좋아지기 시작합니다. 예를 들어 버튼이 클릭되고있을 때 버튼이 눌려지고 누른 것처럼 보이기를 원할 때만 효과를 추가하면됩니다..
효과를 달성하기 위해, 첫 번째 상자 그림자 버튼에서 0이되고 위치가 약간 낮아집니다. 또한 단추 위치와 일치시키기 위해 다른 세 개의 그림자의 강도를 약간 조정해야합니다..
a : 활성 상자 그림자 : 0px 0px 0px 0px rgb (34,34,34), / / 1 차 그림자 * / 0px 3px 7px 0px rgb (17,17,17), / / 2 차 그림자 * / 삽입 0px 1px 1px 0px rgba (250, 250, 250, .2), / * 세번째 그림자 * / 인 세트 0px ~ 10px 35px 5px rgba (0, 0, 0, 0.5); / * 4th Shadow * / background-color : rgb (83,87,93); 상단 : 3px;
또한 일단 버튼을 클릭하면 버튼이 계속 눌려져 있어야하며 전원이 켜져 있음을 나타 내기 위해 아이콘이 '빛나야합니다'.
이러한 효과를 얻으려면 버튼을 :목표 가상 클래스, 그런 다음 아이콘의 색상을 흰색으로 변경하고 텍스트 그림자 흰색과 마찬가지로.
a : target box-shadow : 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), 인 세트 0px 1px 1px 0px rgba (250, 250, 250, 0.2) , 인 세트 0px ~ 10px 35px 5px rgba (0, 0, 0, 0.5); 배경색 : rgb (83,87,93); 상단 : 3px; color : #fff; 텍스트 그림자 : 0px 0px 3px rgb (250,250,250);
추가 읽기 : 사용 : target 가상 클래스
우리는 또한 상자 그림자 버튼 바깥 쪽 원 안에 다음과 같이.
a : active : before, a : target : before (상단 : -5px; 배경색 : rgb (26,27,29); 상자 그림자 : 0px 1px 0px 0px rgba (250,250,250,0.1), 삽입 0px 1px 2px rgba (0, 0, 0, 0.5);
표시등이 기본 빨간색에서 녹색으로 바뀌어 전원이 이미 켜져 있음을 강조 표시합니다.
a : target + span box-shadow : 인세 트 0px 1px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rgba (135,187,83,0.5); 배경색 : rgb (135,187,83);
전환 효과
마지막으로 버튼의 효과를 부드럽게 실행하기 위해 다음 전환 효과를 적용합니다..
아래의 스 니펫은 색깔 재산과 텍스트 그림자 ...에 대한 350ms 앵커 요소에.
a 전환 : 색 350ms, 문자 그림자 350ms; -o-transition : 컬러 350ms, 텍스트 - 섀도우 350ms; -moz-transition : 컬러 350ms, 텍스트 - 섀도우 350ms; -webkit-transition : 컬러 350ms, 텍스트 - 섀도우 350ms;
아래의 두 번째 스 니펫은 배경색 과 상자 그림자 표시 등의 속성.
a : target + span transition : background-color 350ms, box-shadow 700ms; -o-transition : background-color 350ms, 박스 - 섀도우 700ms; -moz-transition : background-color 350ms, 박스 - 섀도우 700ms; -webkit-transition : background-color 350ms, 박스 - 섀도우 700ms;
최종 결과
우리는 필요한 모든 스타일을 통해 왔습니다. 이제 최종 결과물을 볼 수 있으며 아래 링크에서 소스 파일을 다운로드 할 수 있습니다..
- 데모
- 소스 다운로드
보너스 : 어떻게 끄는가?
여기 보너스가 있습니다. 위의 데모에서 버튼을 시도한 경우 버튼을 한 번만 클릭 할 수 있다는 사실을 눈치 챘을 때 버튼을 켜는 것이므로 버튼을 끄는 방법은 무엇입니까??.
불행히도, 우리는 jQuery로 처리해야하지만 정말 간단합니다. 아래는 우리가 필요로하는 모든 jQuery 코드이다..
$ (document) .ready (function () $ ( '# button') 클릭 (function () $ (this) .toggleClass (););
위의 스 니펫은 앵커에 클래스 ON을 추가하고 토글 클래스 함수를 jQuery에서 추가합니다. 그래서, #단추 을 클릭하면 jQuery가 클래스 ON이 추가되었는지 여부를 확인합니다. 그렇지 않으면 jQuery가 클래스를 추가하고 추가 된 경우 jQuery가 클래스를 제거합니다.
노트 : jQuery 라이브러리를 포함하는 것을 잊지 마라..
이제 스타일을 약간 변경해야합니다. 모든 :목표 의사 요소 와 더불어 ....에 다음과 같이 클래스 선택기를 호출합니다.
0, 1, 0, 1, 0, 1, 0, , 인 세트 0px ~ 10px 35px 5px rgba (0, 0, 0, 0.5); 배경색 : rgb (83,87,93); 상단 : 3px; color : #fff; 텍스트 그림자 : 0px 0px 3px rgb (250,250,250); a : 활성 : before, a.on : before (위쪽 : -5px; 배경색 : rgb (26,27,29); 상자 그림자 : 0px 1px 0px 0px rgba (250,250,250,0.1), 삽입 0px 1px 2px rgba (0, 0, 0, 0.5); a.on + span box-shadow : 인세 트 0px 1px 0px rgba (250,250,250,0.5), 0px 0px 3px rgba (135,187,83,0.5); 배경색 : rgb (135,187,83);
마지막으로 브라우저에서 사용해 보겠습니다..
- 데모
- 소스 다운로드
