Tech

CSS Tips

Button Corner Peel Hover Effect

Combine pseudo-elements and linear-gradient to create an impressive button animation that looks like peeling paper.

Coding css animation

Introduction

Button hover effects are important elements that attract user attention and make interactions enjoyable.

In this article, we'll show you how to create an effect where the button corner peels on hover using only CSS. This effect creates a visual impression of paper or a sticker peeling.

Final Demo

Hover over the button. You'll see the top-left corner peel animation.

Preview
HTML
<button class="demo-peel-btn">Click</button>
CSS
.demo-peel-btn {
  position: relative;
  font-size: 1.2em;
  padding: 0.7em 1.4em;
  background-color: #bf0426;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: 0.5em;
  color: #fff;
  box-shadow: 0.3em 0.3em 0.5em rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.demo-peel-btn::before {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  background: linear-gradient(
    135deg,
    #212121 0%,
    #212121 50%,
    #96041f 50%,
    #bf0426 60%
  );
  border-radius: 0 0 0.5em 0;
  box-shadow: 0.15em 0.15em 0.2em rgba(0, 0, 0, 0.3);
  transition: width 0.3s ease, height 0.3s ease;
}

.demo-peel-btn:hover::before {
  width: 1.6em;
  height: 1.6em;
}

.demo-peel-btn:active {
  box-shadow: 0.15em 0.15em 0.2em rgba(0, 0, 0, 0.3);
  transform: translate(0.1em, 0.1em);
}

How It Works

This effect is achieved by combining the ::before pseudo-element and linear-gradient.

Here are the three key points:

1. **Create the peel with pseudo-element**
Use ::before to create the "peel" portion positioned at the top-left of the button. Initially, width and height are set to 0 to hide it.

2. **Express the fold with gradient**
linear-gradient(135deg, ...) creates a diagonal gradient at 45 degrees, representing the boundary between the dark backside and the button surface.

3. **Smooth animation with transition**
Change width and height on hover, using transition to make the "peel" appear smoothly.

HTML Code

<button class="peel-btn">Click</button>

CSS Code

.peel-btn {
  position: relative;
  font-size: 1.2em;
  padding: 0.7em 1.4em;
  background-color: #bf0426;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: 0.5em;
  color: #fff;
  box-shadow: 0.3em 0.3em 0.5em rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.peel-btn::before {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  background: linear-gradient(
    135deg,
    #212121 0%,
    #212121 50%,
    #96041f 50%,
    #bf0426 60%
  );
  border-radius: 0 0 0.5em 0;
  box-shadow: 0.15em 0.15em 0.2em rgba(0, 0, 0, 0.3);
  transition: width 0.3s ease, height 0.3s ease;
}

.peel-btn:hover::before {
  width: 1.6em;
  height: 1.6em;
}

.peel-btn:active {
  box-shadow: 0.15em 0.15em 0.2em rgba(0, 0, 0, 0.3);
  transform: translate(0.1em, 0.1em);
}

Role of Each Property

position: relative

Sets the button as the reference point so the pseudo-element with position: absolute is correctly positioned within the button.

overflow: hidden

Clips the peel portion so it doesn't exceed the button boundary. Used in combination with border-radius.

linear-gradient(135deg, ...)

Creates a gradient in the 135-degree direction (top-left to bottom-right). Switching colors at 50% represents the boundary between the backside and front surface.

border-radius: 0 0 0.5em 0

Rounds only the bottom-right corner to make the peeled portion look natural.

width: 0; height: 0

Hides the pseudo-element initially. It expands on hover to reveal the peel.

transition

Smoothly animates the width and height changes. Using ease creates natural movement.

Gradient Details

The key to the peel effect is the linear-gradient configuration.

```css
background: linear-gradient(
135deg,
#212121 0%, /* Backside (dark color) */
#212121 50%, /* Backside until 50% */
#96041f 50%, /* Fold line from 50% (slightly darker red) */
#bf0426 60% /* Returns to button color from 60% */
);
```

- **#212121 (0%~50%)**: Dark color representing the peeled backside
- **#96041f (50%)**: Fold line, slightly darker than button color for shadow effect
- **#bf0426 (60%~)**: Returns to the original button color

The 135-degree angle creates a diagonal gradient from top-left to bottom-right.

Color Variations

By simply changing the button color, you can create peel buttons with various moods.

Preview
HTML
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
  <button class="demo-peel-btn demo-peel-btn--blue">Blue</button>
  <button class="demo-peel-btn demo-peel-btn--green">Green</button>
  <button class="demo-peel-btn demo-peel-btn--purple">Purple</button>
</div>
CSS
.demo-peel-btn {
  position: relative;
  font-size: 1.2em;
  padding: 0.7em 1.4em;
  background-color: #bf0426;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: 0.5em;
  color: #fff;
  box-shadow: 0.3em 0.3em 0.5em rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.demo-peel-btn::before {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  background: linear-gradient(
    135deg,
    #212121 0%,
    #212121 50%,
    #96041f 50%,
    #bf0426 60%
  );
  border-radius: 0 0 0.5em 0;
  box-shadow: 0.15em 0.15em 0.2em rgba(0, 0, 0, 0.3);
  transition: width 0.3s ease, height 0.3s ease;
}

.demo-peel-btn:hover::before {
  width: 1.6em;
  height: 1.6em;
}

.demo-peel-btn--blue {
  background-color: #2980b9;
}

.demo-peel-btn--blue::before {
  background: linear-gradient(
    135deg,
    #212121 0%,
    #212121 50%,
    #1a5276 50%,
    #2980b9 60%
  );
}

.demo-peel-btn--green {
  background-color: #27ae60;
}

.demo-peel-btn--green::before {
  background: linear-gradient(
    135deg,
    #212121 0%,
    #212121 50%,
    #1e8449 50%,
    #27ae60 60%
  );
}

.demo-peel-btn--purple {
  background-color: #8e44ad;
}

.demo-peel-btn--purple::before {
  background: linear-gradient(
    135deg,
    #212121 0%,
    #212121 50%,
    #6c3483 50%,
    #8e44ad 60%
  );
}

Variation: Top-Right Peel

By slightly modifying the properties, you can create a version that peels from the top-right.

Preview
HTML
<button class="demo-peel-btn demo-peel-btn--right">Right Peel</button>
CSS
.demo-peel-btn {
  position: relative;
  font-size: 1.2em;
  padding: 0.7em 1.4em;
  background-color: #bf0426;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: 0.5em;
  color: #fff;
  box-shadow: 0.3em 0.3em 0.5em rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.demo-peel-btn--right::before {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  right: 0;
  left: auto;
  background: linear-gradient(
    225deg,
    #212121 0%,
    #212121 50%,
    #96041f 50%,
    #bf0426 60%
  );
  border-radius: 0 0 0 0.5em;
  box-shadow: -0.15em 0.15em 0.2em rgba(0, 0, 0, 0.3);
  transition: width 0.3s ease, height 0.3s ease;
}

.demo-peel-btn--right:hover::before {
  width: 1.6em;
  height: 1.6em;
}

Variation Key Points

To create a top-right peel version, make these changes:

**Position Change**
`left: 0` → `right: 0; left: auto;`

**Gradient Angle Change**
`135deg` → `225deg` (direction from top-right to bottom-left)

**Border Radius Change**
`border-radius: 0 0 0.5em 0` (bottom-right) → `border-radius: 0 0 0 0.5em` (bottom-left)

**Shadow Direction Change**
`box-shadow: 0.15em 0.15em ...` → `box-shadow: -0.15em 0.15em ...`

Using the same approach, you can create bottom-left or bottom-right peel versions too.

Advanced: Four-Corner Peel Button

By combining ::before and ::after, you can create a button that peels from multiple corners.

Preview
HTML
<button class="demo-peel-btn demo-peel-btn--corners">4 Corners</button>
CSS
.demo-peel-btn {
  position: relative;
  font-size: 1.2em;
  padding: 0.7em 1.4em;
  background-color: #bf0426;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: 0.5em;
  color: #fff;
  box-shadow: 0.3em 0.3em 0.5em rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.demo-peel-btn--corners::before,
.demo-peel-btn--corners::after {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  box-shadow: 0.1em 0.1em 0.15em rgba(0, 0, 0, 0.3);
  transition: width 0.3s ease, height 0.3s ease;
}

.demo-peel-btn--corners::before {
  top: 0;
  left: 0;
  background: linear-gradient(
    135deg,
    #212121 0%,
    #212121 50%,
    #96041f 50%,
    #bf0426 60%
  );
  border-radius: 0 0 0.5em 0;
}

.demo-peel-btn--corners::after {
  bottom: 0;
  right: 0;
  background: linear-gradient(
    315deg,
    #212121 0%,
    #212121 50%,
    #96041f 50%,
    #bf0426 60%
  );
  border-radius: 0.5em 0 0 0;
}

.demo-peel-btn--corners:hover::before,
.demo-peel-btn--corners:hover::after {
  width: 1.2em;
  height: 1.2em;
}

Summary

By combining pseudo-elements and linear-gradient, you can create an impressive button hover effect that looks like peeling paper.

The key is expressing the "backside" and "fold" with gradients and animating smoothly with transitions.

By changing angles and positions, you can create variations that peel from different directions. Since it uses only CSS without JavaScript, it's also excellent for performance.