CSS의 방향 인식이있는 고스트 버튼

유령 버튼을 보았을 것입니까? 그것들은 투명한 배경으로 특징 지어지며 마우스가 맴돌 때 배경은 단색으로 채워집니다. Smashing Magazine에는이 주제에 대한 기사가 있습니다. 이 기사는 유령 버튼을 만들지만이 부분은 비교적 간단합니다. 흥미롭게도 까다 롭고, 우리는 마우스 호버에서 고스트 버튼의 채우기 애니메이션을 시작할 것입니다.

기본 유령 버튼 예는 다음과 같습니다.

대부분의 경우 배경색은 단색으로 전환됩니다. 일부 디자인은 버튼을 왼쪽에서 오른쪽으로, 위로 아래로 채우면 시각적 효과를 높입니다. 예를 들어 왼쪽에서 오른쪽으로 채우십시오.

다음은 소규모 사용자 경험 문제가 있습니다. 마우스가 채워진 영역의 가장자리 위로 떠오르면 무언가 잘못되었다고 느낄 것입니다. 이 예를 고려하면, 버튼은 왼쪽에서 채워지고 오른쪽에서 마우스를 가져옵니다.

초기 호버 지점에서 버튼을 채우는 것이 가장 좋습니다.

그렇다면 버튼 방향 인식을 어떻게 제공합니까? 초기 직관은 JavaScript를 사용하는 것이지만 CSS 및 추가 태그로 수행 할 수 있습니다.

결과를 간단히 살펴보고 싶은 사람들을 위해 다음은 순수한 CSS로 구현 된 방향 인식 고스트 버튼이 있습니다!

단계별로 구축합시다. 모든 코드는이 CodePen 컬렉션에서 찾을 수 있습니다.

기본을 만듭니다

고스트 버튼을 만드는 기본부터 시작하겠습니다. 마킹은 간단합니다.

 <button>우우!</button>

CSS 구현은 CSS 사용자 정의 속성을 활용합니다. 이를 통해 유지 보수가 더 쉬워지고 인라인 속성을 통해 사용자 정의를 촉진합니다.

 버튼 {
  -BORDERWIDTH : 5;
  -BoxShadowDepth : 8;
  -ButtonColor : #F00;
  -결제 크기 : 3;
  -horizontalPadding : 16;
  -TerticalPadding : 8;

  배경 : 투명;
  국경 : calc (var (-borderwidth) * 1px) solid var (-buttoncolor);
  Box-Shadow : calc (var (-BoxShadowDepth) * 1px) calc (var (-BoxShadowDepth) * 1px) 0 #888;
  색상 : var (-ButtonColor);
  커서 : 포인터;
  글꼴 크기 : calc (var (-Fontsize) * 1REM);
  글꼴 중량 : 대담한;
  개요 : 투명;
  패딩 : calc (var (-verticalpadding) * 1px) calc (var (-horizontalpadding) * 1px);
  전환 : Box-Shadow 0.15S 용이성;
}

버튼 : 호버 {
  Box-Shadow : calc (var (-BoxShadowDepth) / 2 * 1px) calc (var (-BoxShadowDepth) / 2 * 1px) 0 #888;
}

버튼 : Active {
  Box-Shadow : 0 0 #888;
}

함께 모으고 우리는 다음을 얻습니다.

매우 좋은! 우리는 버튼과 호버 효과가 있지만 아직 채우기 효과는 없습니다. 다음으로 채우기 효과를 추가하겠습니다.

채우기를 추가하십시오

이를 위해 고스트 버튼의 채우기 상태를 표시하는 요소를 만듭니다. 비결은 clip-path 사용하여 이러한 요소를 자르고 숨기는 것입니다. clip-path 변환하여 호버에 표시 할 수 있습니다.

부모 버튼과 정렬 되어야합니다 . 우리의 CSS 변수는 여기에서 큰 도움이 될 것입니다.

처음에는 의사 요소 사용을 고려할 수 있습니다. 그러나 각 방향에 대해 의사 요소의 수는 충분하지 않습니다. 그들은 또한 접근성에 영향을 미칩니다.

기본 왼쪽에서 오른쪽 패딩을 추가하여 시작하겠습니다. 먼저 추가하겠습니다<span></span> 요소. 해야 한다<span></span> 요소는 버튼과 동일한 텍스트 내용을 가져야합니다.

<button>
  <span>우우!</span>
  우우!
</button>

이제 우리는 필요합니다<span></span> 요소는 버튼과 정렬됩니다. 우리의 CSS 변수는 대부분의 작업을 수행합니다.

 버튼 스팬 {
  배경 : var (-ButtonColor);
  국경 : calc (var (-borderwidth) * 1px) solid var (-buttoncolor);
  하단 : calc (var (-borderwidth) * -1px);
  색상 : var (-bg, #fafafa);
  왼쪽 : calc (var (-borderwidth) * -1px);
  패딩 : calc (var (-verticalpadding) * 1px) calc (var (-horizontalpadding) * 1px);
  위치 : 절대;
  오른쪽 : calc (var (-borderwidth) * -1px);
  상단 : calc (var (-borderwidth) * -1px);
}

마지막으로, 우리는 할 것입니다<span></span> 요소는보기 외부로 자르고 작물을 업데이트하여 호버에 표시하는 규칙을 추가합니다. 전환을 정의하면 케이크에 착빙이 추가됩니다.

 버튼 스팬 {
  -Clip : 삽입 (0 100% 0 0);
  -webkit-clip-path : var (-클립);
  클립 경로 : var (-클립);
  전환 : 클립 경로 0.25S 편의, -webkit-clip-path 0.25s 용이성;
  / * ... 남은 div 스타일 */
}

버튼 : 호버 스팬 {
  -Clip : 삽입 (0 0 0 0);
}

방향 인식을 추가하십시오

그렇다면 방향 인식을 어떻게 추가합니까? 우리는 네 가지 요소가 필요합니다. 각 요소는 호버 진입 점을 감지 할 책임이 있습니다. clip-path 사용하여 버튼 영역을 네 부분으로 나눌 수 있습니다.

버튼에 4를 추가합시다<span></span> 요소와 버튼을 채우도록 배치합니다.

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  우우!
</button>

버튼 스팬 {
  배경 : var (-bg);
  하단 : calc (var (-borderwidth) * -1px);
  -webkit-clip-path : var (-클립);
  클립 경로 : var (-클립);
  왼쪽 : calc (var (-borderwidth) * -1px);
  불투명도 : 0.5;
  위치 : 절대;
  오른쪽 : calc (var (-borderwidth) * -1px);
  상단 : calc (var (-borderwidth) * -1px);
  z- 인덱스 : 1;
}

CSS 변수를 사용하여 각 요소를 찾아 작물과 색상을 할당 할 수 있습니다.

 버튼 스팬 : nth-of-type (1) {
  ---BG : #00F;
  -Clip : 다각형 (0 0, 100% 0, 50% 50%, 50% 50%);
}
버튼 스팬 : nth-of-type (2) {
  ---BG : #F00;
  -Clip : 다각형 (100% 0, 100% 100%, 50% 50%);
}
버튼 스팬 : nth-of-type (3) {
  ---BG : #008000;
  -Clip : 다각형 (0 100%, 100%100%, 50%50%);
}
버튼 스팬 : nth-of-type (4) {
  ---BG : #800080;
  -Clip : 다각형 (0 0, 0 100%, 50%50%);
}

매우 멋지다. 이것을 테스트하려면 호버링하는 동안 불투명도를 바꾸겠습니다.

 버튼 스팬 : nth-of-type (1) : 호버,
버튼 스팬 : nth-of-type (2) : 호버,
버튼 스팬 : nth-of-type (3) : 호버,
버튼 스팬 : nth-of-type (4) : 호버 {
  불투명도 : 1;
}

오, 여기에 질문이 있습니다. 우리가 들어가서 한 섹션 위로 마우스로 가져간 다음 다른 섹션 위로 가져 가면 충전 방향이 바뀝니다. 이것은 옳지 않은 것 같습니다. 이 문제를 해결하기 위해 공간의 일부가 채워 지도록 z-index 및 clip-path 호버에 설정할 수 있습니다.

 버튼 스팬 : nth-of-type (1) : 호버,
버튼 스팬 : nth-of-type (2) : 호버,
버튼 스팬 : nth-of-type (3) : 호버,
버튼 스팬 : nth-of-type (4) : 호버 {
  -Clip : 다각형 (0 0, 100% 0, 100% 100%, 0 100%);
  불투명도 : 1;
  z- 인덱스 : 2;
}

함께 결합하십시오

우리는 채우기 애니메이션을 만드는 방법을 알고 있으며 방향을 감지하는 방법을 알고 있습니다. 우리는 두 가지를 어떻게 결합합니까? 같은 수준에서 콤보를 사용하십시오!

이렇게하면 세그먼트를 호버 할 때 특정 채우기 요소를 표시 할 수 있습니다.

먼저 태그를 업데이트합시다.

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <b>우우!</b>
  <b>우우!</b>
  <b>우우!</b>
  <b>우우!</b>
  우우!
</button>

이제 CSS를 업데이트 할 수 있습니다. 왼쪽에서 오른쪽으로 패딩을 언급하면 ​​스타일을 재사용 할 수 있습니다. 각 요소에 대한 특정 clip-path 설정하면됩니다. 일부 속성 값과 같은 순서로 처리했습니다. 첫 번째 자식 요소는 상단이고 두 번째 요소는 옳습니다.

 버튼 B : nth-of-type (1) {
  -Clip : 삽입 (0 0 100% 0);
}
버튼 B : nth-of-type (2) {
  -Clip : 삽입 (0 0 0 100%);
}
버튼 B : nth-of-type (3) {
  -Clip : 삽입 (100% 0 0 0);
}
버튼 B : nth-of-type (4) {
  -Clip : 삽입 (0 100% 0 0);
}

마지막 단계는 페어링 세그먼트를 호버링 할 때 관련 요소의 clip-path 업데이트하는 것입니다.

 버튼 스팬 : nth-of-type (1) : hover ~ b : nth-of-type (1),
버튼 스팬 : nth-of-type (2) : hover ~ b : nth-of-type (2),
버튼 스팬 : nth-of-type (3) : hover ~ b : nth-of-type (3),
버튼 스팬 : nth-of-type (4) : hover ~ b : nth-of-type (4) {
  -Clip : 삽입 (0 0 0 0);
}

괜찮은! 방향 인식이있는 순수한 CSS 유령 버튼을 얻습니다.

접근성

현재 상태에서는 버튼이 액세스 할 수 없습니다.

스크린 리더가 콘텐츠를 4 번 반복하기 때문에 이러한 추가 요소는 큰 도움이되지 않습니다. 화면 리더에서 이러한 요소를 숨겨야합니다.

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <b aria-hidden="true">우우!</b>
  <b aria-hidden="true">우우!</b>
  <b aria-hidden="true">우우!</b>
  <b aria-hidden="true">우우!</b>
  우우!
</button>

더 이상 중복 컨텐츠가 없습니다.

그게 다야!

추가 마킹과 CSS 트릭만으로도 방향 인식으로 고스트 버튼을 만들 수 있습니다. 사전 처리기를 사용하거나 응용 프로그램에서 구성 요소를 결합하면 모든 HTML을 작성할 필요가 없습니다.

이는 인라인 CSS 변수를 사용하여 버튼 색상을 제어하는 ​​데모입니다.

이 개정 된 출력은 원본 이미지를 유지하고 원본 텍스트의 핵심 의미를 유지하면서 더 간결하고 다양한 문구를 사용합니다. 또한 원래 기사에 언급 된 접근성 문제를 다룹니다.

위 내용은 CSS의 방향 인식이있는 고스트 버튼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!