CSS-ing Candy Ghost Buttons

Recently, I sought coding inspiration, lacking artistic talent. My approach? Replicating visually appealing creations by others, focusing on clean, concise code. These candy ghost buttons caught my eye!

They seemed perfect for a quick project. Within fifteen minutes, I achieved this in Chromium:

This technique deserves sharing. This article details my process and explores alternative approaches.

Initial Setup

A simple button element forms the base, incorporating a data-ico attribute for emoji insertion and a custom CSS property, --slist, for the stop list in the style attribute.

<code>boo!</code>

Post-article completion, I discovered Safari's significant clipping-to-text limitations. It fails on button elements, display: flex (and possibly grid) elements, and child element text. Consequently, the techniques described here are Safari-incompatible. The workaround involves nesting a <span></span> within the button, applying all button styles to the <span></span>, and ensuring it covers the parent's border-box. For Linux users lacking physical Apple device access, I recommend Epiphany (thanks, Brian!).

The CSS utilizes an ::after pseudo-element for the icon and a grid layout for text/icon alignment. Border, padding, border-radius, the --slist stop list for the diagonal gradient, and font styling are also applied.

<code>button {
  display: grid;
  grid-auto-flow: column;
  grid-gap: .5em;
  border: solid .25em transparent;
  padding: 1em 1.5em;
  border-radius: 9em;
  background: 
    linear-gradient(to right bottom, var(--slist)) 
      border-box;
  font: 700 1.5em/ 1.25 ubuntu, sans-serif;
  text-transform: uppercase;

  &::after { content: attr(data-ico) }
}</code>

Clarification on the above code: background-origin and background-clip are set to border-box. background-origin positions the background-position's 0,0 point at the top-left of the specified box, determining the reference for background-size. border-box ensures the gradient spans the entire border-box. The default padding-box would result in the gradient only covering the padding area.

Chromium-Specific Solution (Non-Standard)

This method employs three mask layers and compositing. A refresher on mask compositing can be found in [link to crash course]. Only the alpha channel matters in CSS mask layers; RGB channels don't affect the outcome.

We begin with two layers: a fully opaque layer covering the border-box (alpha = 1 everywhere) and a second, also fully opaque, layer restricted to the padding-box (alpha = 1 within padding-box, 0 outside).

Visualize layout boxes as nested rectangles. The bottom layer is fully opaque across the border-box. The top layer is opaque within the padding-box and transparent in the border area. Corner rounding is determined by border-radius (and border-width for the padding-box).

These layers are composited using the exclude operation (or xor in WebKit). The result: alpha = 0 within the padding-box (both layers have alpha = 1), and alpha = 1 in the border area (first layer alpha = 1, second layer alpha = 0).

The code:

<code>button {
  /* same base styles */
  --full: linear-gradient(red 0 0);
  -webkit-mask: var(--full) padding-box, var(--full);
  -webkit-mask-composite: xor;
  mask: var(--full) padding-box exclude, var(--full);
}</code>

Details: Red gradients are used for brevity. Gradients are used for both layers due to background-clip limitations. The standard mask-composite is included, with the non-standard version overridden.

This produces a gradient border but lacks text. Adding a third mask layer, restricted to text (with transparent text), and XORing it with the previous result adds the text back. However, this is Chrome-specific due to the non-standard text value for mask-clip. A @supports block ensures cross-browser compatibility (without text masking in non-supporting browsers).

<code>button {
  /* same base styles */

  @supports (-webkit-mask-clip: text) {
    -webkit-text-fill-color: transparent;
    --full: linear-gradient(red 0 0);
    -webkit-mask: var(--full) text, var(--full) padding-box, var(--full);
    -webkit-mask-composite: xor;
  }
}</code>

This is a simple approach, but its reliance on non-standard features limits its browser compatibility. Let's explore alternative, more broadly supported methods.

Alternative Approaches: Pseudo-element and Border-Image Solutions

The extra pseudo-element solution avoids masking by clipping the background to the text area and adding a gradient border using an absolutely positioned ::before pseudo-element. The border-image solution, while simpler, has limitations with border-radius. These methods offer better cross-browser compatibility than the Chromium-specific solution. Further details and code examples for these methods are provided in the original article. The blending solution, also described in the original article, offers another approach but with limitations regarding background interaction. Each method has its strengths and weaknesses depending on the desired level of cross-browser support and specific design requirements.

The above is the detailed content of CSS-ing Candy Ghost Buttons. For more information, please follow other related articles on the PHP Chinese website!