幽靈按鈕具有CSS中的方向意識

你可能已經見過幽靈按鈕?，它們的特點是背景透明，鼠標懸停時背景填充為實色。 Smashing Magazine 有一篇關於此主題的文章。本文將構建一個幽靈按鈕，但這部分比較簡單。有趣且棘手的是，我們要讓幽靈按鈕的填充動畫從鼠標懸停的方位開始。

這是一個基本的幽靈按鈕示例：

大多數情況下，背景顏色會過渡到實色。有些設計會讓按鈕從左到右、從上到下等方向填充，以增加視覺效果。例如，從左到右填充：

這裡有一個用戶體驗上的小問題。如果鼠標懸停在填充區域的邊緣，感覺會不太對勁。考慮這個例子，按鈕從左側填充，而你從右側懸停。

最好讓按鈕從初始懸停點開始填充。

那麼，我們如何賦予按鈕方向感知能力呢？你最初的直覺可能是使用JavaScript，但我們可以用CSS 和一些額外的標記來實現。

對於那些想快速了解結果的人，這裡有一些純CSS 實現的具有方向感知能力的幽靈按鈕！

讓我們一步一步地構建它。所有代碼都可以在這個CodePen 合集中找到。

創建基礎

讓我們從創建幽靈按鈕的基礎開始。標記很簡單。

 <button>Boo!</button>

我們的CSS 實現將利用CSS 自定義屬性。這使得維護更容易，也方便通過內聯屬性進行自定義。

 button {
  --borderWidth: 5;
  --boxShadowDepth: 8;
  --buttonColor: #f00;
  --fontSize: 3;
  --horizontalPadding: 16;
  --verticalPadding: 8;

  background: transparent;
  border: calc(var(--borderWidth) * 1px) solid var(--buttonColor);
  box-shadow: calc(var(--boxShadowDepth) * 1px) calc(var(--boxShadowDepth) * 1px) 0 #888;
  color: var(--buttonColor);
  cursor: pointer;
  font-size: calc(var(--fontSize) * 1rem);
  font-weight: bold;
  outline: transparent;
  padding: calc(var(--verticalPadding) * 1px) calc(var(--horizontalPadding) * 1px);
  transition: box-shadow 0.15s ease;
}

button:hover {
  box-shadow: calc(var(--boxShadowDepth) / 2 * 1px) calc(var(--boxShadowDepth) / 2 * 1px) 0 #888;
}

button:active {
  box-shadow: 0 0 0 #888;
}

組合在一起，我們得到：

很好！我們有一個按鈕和懸停效果，但還沒有填充效果。接下來讓我們添加填充效果。

添加填充

為此，我們創建一些元素來顯示幽靈按鈕的填充狀態。技巧是使用clip-path來裁剪這些元素並隱藏它們。我們可以通過轉換clip-path來在懸停時顯示它們。

它們必須與父按鈕對齊。我們的CSS 變量在這裡將大有幫助。

起初，我們可以考慮使用偽元素。但是，對於每個方向，偽元素的數量是不夠的。它們還會影響可訪問性……稍後會詳細說明。

讓我們從添加一個基本的從左到右的填充開始。首先，讓我們添加一個<span></span>元素。該<span></span>元素需要與按鈕具有相同的文本內容。

<button>
  <span>Boo!</span>
  Boo!
</button>

現在我們需要將<span></span>元素與按鈕對齊。我們的CSS 變量將完成大部分工作。

 button span {
  background: var(--buttonColor);
  border: calc(var(--borderWidth) * 1px) solid var(--buttonColor);
  bottom: calc(var(--borderWidth) * -1px);
  color: var(--bg, #fafafa);
  left: calc(var(--borderWidth) * -1px);
  padding: calc(var(--verticalPadding) * 1px) calc(var(--horizontalPadding) * 1px);
  position: absolute;
  right: calc(var(--borderWidth) * -1px);
  top: calc(var(--borderWidth) * -1px);
}

最後，我們將<span></span>元素裁剪到視圖之外，並添加一個規則，通過更新裁剪來在懸停時顯示它。定義一個過渡將為它錦上添花。

 button span {
  --clip: inset(0 100% 0 0);
  -webkit-clip-path: var(--clip);
  clip-path: var(--clip);
  transition: clip-path 0.25s ease, -webkit-clip-path 0.25s ease;
  /* ...Remaining div styles */
}

button:hover span {
  --clip: inset(0 0 0 0);
}

添加方向感知

那麼，我們如何添加方向感知呢？我們需要四個元素。每個元素將負責檢測懸停入口點。使用clip-path ，我們可以將按鈕區域分成四個部分。

讓我們向按鈕添加四個<span></span>元素，並將它們定位以填充按鈕。

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  Boo!
</button>

button span {
  background: var(--bg);
  bottom: calc(var(--borderWidth) * -1px);
  -webkit-clip-path: var(--clip);
  clip-path: var(--clip);
  left: calc(var(--borderWidth) * -1px);
  opacity: 0.5;
  position: absolute;
  right: calc(var(--borderWidth) * -1px);
  top: calc(var(--borderWidth) * -1px);
  z-index: 1;
}

我們可以定位每個元素並使用CSS 變量分配裁剪和顏色。

 button span:nth-of-type(1) {
  --bg: #00f;
  --clip: polygon(0 0, 100% 0, 50% 50%, 50% 50%);
}
button span:nth-of-type(2) {
  --bg: #f00;
  --clip: polygon(100% 0, 100% 100%, 50% 50%);
}
button span:nth-of-type(3) {
  --bg: #008000;
  --clip: polygon(0 100%, 100% 100%, 50% 50%);
}
button span:nth-of-type(4) {
  --bg: #800080;
  --clip: polygon(0 0, 0 100%, 50% 50%);
}

很酷。為了測試這一點，讓我們在懸停時更改不透明度。

 button span:nth-of-type(1):hover,
button span:nth-of-type(2):hover,
button span:nth-of-type(3):hover,
button span:nth-of-type(4):hover {
  opacity: 1;
}

哦，這裡有一個問題。如果我們進入並懸停在一個部分上，然後懸停在另一個部分上，填充方向將會改變。這看起來不太對勁。為了解決這個問題，我們可以在懸停時設置z-index和clip-path ，以便一個部分填充空間。

 button span:nth-of-type(1):hover,
button span:nth-of-type(2):hover,
button span:nth-of-type(3):hover,
button span:nth-of-type(4):hover {
  --clip: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  opacity: 1;
  z-index: 2;
}

組合在一起

我們知道如何創建填充動畫，我們也知道如何檢測方向。我們如何將兩者結合起來呢？使用同級組合器！

這樣做意味著當我們懸停一個方向段時，我們可以顯示一個特定的填充元素。

首先，讓我們更新標記。

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <b>Boo!</b>
  <b>Boo!</b>
  <b>Boo!</b>
  <b>Boo!</b>
  Boo!
</button>

現在，我們可以更新CSS。參考我們的從左到右的填充，我們可以重用樣式。我們只需要為每個元素設置一個特定的clip-path 。我按照一些屬性值相同的順序來處理。第一個子元素是頂部，第二個是右側，依此類推。

 button b:nth-of-type(1) {
  --clip: inset(0 0 100% 0);
}
button b:nth-of-type(2) {
  --clip: inset(0 0 0 100%);
}
button b:nth-of-type(3) {
  --clip: inset(100% 0 0 0);
}
button b:nth-of-type(4) {
  --clip: inset(0 100% 0 0);
}

最後一步是在懸停配對段時更新相關元素的clip-path 。

 button span:nth-of-type(1):hover ~ b:nth-of-type(1),
button span:nth-of-type(2):hover ~ b:nth-of-type(2),
button span:nth-of-type(3):hover ~ b:nth-of-type(3),
button span:nth-of-type(4):hover ~ b:nth-of-type(4) {
  --clip: inset(0 0 0 0);
}

好了！我們得到了一個具有方向感知能力的純CSS 幽靈按鈕。

可訪問性

在當前狀態下，按鈕是不可訪問的。

這些額外的元素並沒有多大幫助，因為屏幕閱讀器會重複內容四次。我們需要從屏幕閱讀器中隱藏這些元素。

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

不再重複內容了。

就這樣！

只需一些額外的標記和一些CSS 技巧，我們就可以創建具有方向感知能力的幽靈按鈕。使用預處理器或在你的應用程序中組合一個組件，你就不需要寫出所有的HTML 了。

這是一個使用內聯CSS 變量來控制按鈕顏色的演示。

This revised output maintains the original image and uses more concise and varied phrasing while preserving the core meaning of the original text. It also addresses the accessibility issue mentioned in the original article.

以上是幽靈按鈕具有CSS中的方向意識的詳細內容。更多資訊請關注PHP中文網其他相關文章！