Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use CSS to achieve aspect-aware ghost buttons, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's learn about it!

Basics

Let's create a button first, it's very simple!

Boo!

We use CSS custom properties to complete the style, which is easier to maintain.

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

}

We implemented a button and hover effect, but no padding. Let's keep going!

Add fill

We create additional elements as the state when the button is populated. Hide it through clip-path. Set clip-path to display the element transition when the mouse hovers over the button.

They must be aligned with the parent button. Here our CSS variable will show its advantage.

We could have done it through pseudo-elements, but it doesn't meet the four aspects we need, and it interferes with accessibility. We'll talk about it later.

Let's first add an effect of filling from left to right. We want to add a span tag on the home page, which has the same content as the button.

Boo!

Boo!

Next we will overlap and align the span with the button.

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)

}

Finally, we hide the element by cropping, and update the clipping rules to show the element when hovering.

Button span {

-- clip: inset (0100%)

-webkit-clip-path: var (--clip)

Clip-path: var (--clip)

Transition: clip-path 0.25s ease

/ /... Remaining div styles

}

Button:hover span {

-- clip: inset (0 000)

}

Add direction awareness

So, how do you perceive direction? We need four elements. Each element will be responsible for detecting the hover entry point. Using clip-path, we can divide the button area into four parts.

We add four span to the button and put it in four areas to populate the button.

Boo!

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

}

We position each element and use the CSS variable to give them a background color and cropping rules.

Button span:nth-of-type (1) {

-bg: # 00f

-- clip: polygon (00,100% 0,50%, 50%)

}

Button span:nth-of-type (2) {

-- bg: # f00

-- clip: polygon (100%, 100%, 50%)

}

Button span:nth-of-type (3) {

-- bg: # 008000

-- clip: polygon (0 100%, 100% 100%, 50%)

}

Button span:nth-of-type (4) {

-- bg: # 800080

-- clip: polygon (00,0100%, 50%)

}

In order to test, let's change the transparency of the element when hovering.

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

}

Gee, there's a problem here. If we enter and hover over one segment, and then hover over another segment, the fill direction will change. This doesn't look right. To solve this problem, we can set up z-index and clip-path during hover to fill this space.

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 (00,100,100%, 0.100%)

Opacity: 1

Z-index: 2

}

Put it together

Now we know how to create a fill animation and how to determine the direction. So how do we put them together to achieve the desired effect? The answer is a peer selector!

When we hover over a direction block, we can populate the specified element.

First, we need to update our code:

Boo!

Boo!

Boo!

Boo!

Boo!

Next, we need to update our CSS, and fill patterns we can reuse from left to right. But you need to set a different clip-path for each element. We set the first on the top, the second on the right, the third on the bottom, and the fourth on the left.

Button b:nth-of-type (1) {

-- clip: inset (00 100%)

}

Button b:nth-of-type (2) {

-- clip: inset (0.00100%)

}

Button b:nth-of-type (3) {

-clip: inset (100000)

}

Button b:nth-of-type (4) {

-- clip: inset (0100%)

}

The final step is to update the clip-path of the corresponding element when the mouse hovers over the corresponding direction block.

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 000)

}

At this point, our direction-aware ghost button is realized.

Accessibility

When the button is inaccessible, the following status is displayed.

These extra elements cause the screen reader to repeat it four times. So, we need to hide them.

Boo!

Boo!

Boo!

Boo!

Boo!

That's all of the article "how to use CSS to implement aspect-aware Ghost buttons". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.