1

I have a button (which is actually a link using <a>). I have to use a pseudo-element i.e. ::after

The problem is I want to skew the pseudo-element and then clip it to my original box.

@import url("https://fonts.googleapis.com/css2?family=Staatliches&display=swap");

body {
  display: flex;
  justify-content: center;
  text-align: center;
  color: #788;
}

#hover-skew {
  display: block;
  text-decoration: none;
  color: #ffffff;
  width: 7em;
  padding: 1em;
  background-color: #000000;

  font-size: 30px;
  font-family: Staatliches;
  letter-spacing: 0.3em;

  position: relative;
  z-index: 1;
}
<a href="#" id="hover-skew">Button</a>

This is my button without the pseudo-element.

@import url("https://fonts.googleapis.com/css2?family=Staatliches&display=swap");

body {
  display: flex;
  justify-content: center;
  text-align: center;
  color: #788;
}

#hover-skew {
  display: block;
  text-decoration: none;
  color: #ffffff;
  width: 7em;
  padding: 1em;
  background-color: #000000;

  font-size: 30px;
  font-family: Staatliches;
  letter-spacing: 0.3em;

  position: relative;
  z-index: 1;
}

#hover-skew::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #777;
  z-index: -1;
  transform: skewX(-30deg) scale(1.3, 1);
  -webkit-background-clip: border-box;
  overflow: hidden;
  transition: transform 200ms ease-in;
}
<a href="#" id="hover-skew">Button</a>

Notice how it's overflowing? I want it to be of the original size as the box.

I know I have used scale, but it doesn't matter right, also to clarify, I used scale as I have used skew, so scaling makes it fit the box.

Also to clarify, I used skew so that I will scale the ::after element to 0, and the scale it to 1 on :hover to create a nice effect.

I'm trying to copy the style of the button on hover on this website but by using the <a> tag, so if you got any other approach then please comment. Thank You.

Adarsh Dubey
  • 302
  • 2
  • 12

1 Answers1

2

Here is an example:

@import url("https://fonts.googleapis.com/css2?family=Staatliches&display=swap");

body {
  display: flex;
  justify-content: center;
  text-align: center;
  color: #788;
}

#hover-skew {
  display: block;
  text-decoration: none;
  color: #ffffff;
  width: 7em;
  padding: 1em;
  background-color: #000000;
  font-size: 30px;
  font-family: Staatliches;
  letter-spacing: 0.3em;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

#hover-skew:after {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 120%;
  top: 0;
  left: -5%;
  z-index: -1;
  transition: transform .3s ease-out;
  transform: translateX(-100%) skew(-10deg);
  background-color: #777;
}

#hover-skew:hover:after {
  transform: translateX(0) skew(-10deg);
}
<a href="#" id="hover-skew">Button</a>

Useful sources: pseudo-element hover

InspectorGadget
  • 879
  • 6
  • 20