Creating a diagonal emboss effect with CSS

Question

Creating a diagonal emboss effect with CSS

Looking to create a 3D diagonal emboss button similar to the image below:

https://i.sstatic.net/43cSd.jpg

My initial idea is to incorporate shadow effects and then use two small triangles with ::before and ::after pseudo-elements to close the gap.

However, I've noticed that there is always a very slight misalignment of less than 1 pixel (as shown in the snippet below). To make coding easier, I've used different colors for distinction.

.button {
  border: 1px solid red;
  box-shadow: -10px 10px red;
  
  display: inline-block; margin: 30px; position: relative; outline: none; font-size: 40px;
  padding: 10px 30px; background-color: #333; font-weight: 700;
  color: white; letter-spacing: 1px;
  line-height: 1; text-transform: uppercase; text-align: center;
}

/* create triangle */

.button::before { content: ""; position: absolute;
  top: -1px;
  left: -11px;
  width: 0; height: 0; font-size: 0; line-height: 0%; border-style: solid; border-color: transparent; border-width: 0 0 11px 11px; border-bottom-color: red; }

.button::after { content: ""; position: absolute;
  right: -1px;
  bottom: -11px;
  width: 0; height: 0; font-size: 0; line-height: 0%; border-style: solid; border-color: transparent; border-width: 11px 11px 0 0; border-top-color: red; }

<a class="button">Gallery</a>

Is there a more efficient way to implement this design without using triangles and absolute positioning?

html css css-shapes linear-gradients

Answer 1

Answer №1

To create a unique effect, consider using two angled linear-gradient strips on a button element - one on the left and another at the bottom.

Visualize placing a 10px x 10px square at the top left and bottom right of the pseudo-element with one side transparent and the other colored. This technique creates a triangle shape, which is the method utilized here.

A pseudo-element (a square or rectangle) positioned behind the parent creates triangular cuts using the angled linear-gradients set at 135 degrees and 315 degrees. By making one half of the diagonal line transparent and the other hotpink, a triangular cut effect is achieved.

The process involves:

Create a pseudo-element that is larger than the parent to extend outside the button element.
Add small horizontal and vertical gradient background strips to the pseudo-element.
Create angled linear-gradients for the triangular cuts on the sides.
Add a 1px border using box-shadow without affecting the positioning.

.button {
  display: inline-block;
  margin: 30px;
  position: relative;
  outline: none;
  font-size: 40px;
  padding: 10px 30px;
  background-color: #333; 
  font-weight: 700;
  color: white;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  box-shadow: inset 0px 0px 0px 1px hotpink; /* mimics the border */
}
.button:after {
  position: absolute;
  content: '';
  top: 0px;
  right: 0px; 
  height: calc(100% + 10px); 
  width: calc(100% + 10px); 
  background: linear-gradient(135deg, transparent 7px, hotpink 7px), linear-gradient(315deg, transparent 7px, hotpink 7px);
  background-size: 10px 100%, 100% 10px;
  background-position: top left, bottom left;
  background-repeat: no-repeat;
}

<a class="button">Gallery</a>

<a class="button">Gallery Button Big</a>

Note: While this effect can be achieved without a pseudo-element, it may lead to increased complexity as shown in this demo. Therefore, sticking to the pseudo-element approach is recommended for simplicity.

Answer 2

To create a unique effect, consider using two angled linear-gradient strips on a button element - one on the left and another at the bottom.

Visualize placing a 10px x 10px square at the top left and bottom right of the pseudo-element with one side transparent and the other colored. This technique creates a triangle shape, which is the method utilized here.

A pseudo-element (a square or rectangle) positioned behind the parent creates triangular cuts using the angled linear-gradients set at 135 degrees and 315 degrees. By making one half of the diagonal line transparent and the other hotpink, a triangular cut effect is achieved.

The process involves:

Create a pseudo-element that is larger than the parent to extend outside the button element.
Add small horizontal and vertical gradient background strips to the pseudo-element.
Create angled linear-gradients for the triangular cuts on the sides.
Add a 1px border using box-shadow without affecting the positioning.

.button {
  display: inline-block;
  margin: 30px;
  position: relative;
  outline: none;
  font-size: 40px;
  padding: 10px 30px;
  background-color: #333; 
  font-weight: 700;
  color: white;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  box-shadow: inset 0px 0px 0px 1px hotpink; /* mimics the border */
}
.button:after {
  position: absolute;
  content: '';
  top: 0px;
  right: 0px; 
  height: calc(100% + 10px); 
  width: calc(100% + 10px); 
  background: linear-gradient(135deg, transparent 7px, hotpink 7px), linear-gradient(315deg, transparent 7px, hotpink 7px);
  background-size: 10px 100%, 100% 10px;
  background-position: top left, bottom left;
  background-repeat: no-repeat;
}

<a class="button">Gallery</a>

<a class="button">Gallery Button Big</a>

Note: While this effect can be achieved without a pseudo-element, it may lead to increased complexity as shown in this demo. Therefore, sticking to the pseudo-element approach is recommended for simplicity.

Answer 3

Answer №2

If you want to keep it simple, stick to using just box-shadow instead of creating a triangle with more code.

For example:

.button {
  border: 1px solid pink;
  box-shadow: -10px 10px pink,-9px 9px pink,-8px 8px pink,-7px 7px pink,-6px 6px pink,-5px 5px pink,-4px 4px pink,-3px 3px pink,-2px 2px pink;
  
  display: inline-block; margin: 30px; position: relative; outline: none; font-size: 40px;
  padding: 10px 30px; background-color: #333; font-weight: 700;
  color: white; letter-spacing: 1px;
  line-height: 1; text-transform: uppercase; text-align: center;
}

<a class="button">Gallery</a>

If you want to avoid pixelated edges, simply add 1px inside each declaration.

.button{
 border: 1px solid pink;
 box-shadow: -10px 10px 1px pink,-9px 9px 1px pink,-8px 8px 1px pink,-7px 7px 1px pink,-6px 6px 1px pink,-5px 5px 1px pink,-4px 4px 1px pink,-3px 3px 1px pink,-2px 2px 1px pink,-1px 1px 1px pink,0px 0px 1px pink;
  
  display: inline-block; margin: 30px; position: relative; outline: none; font-size: 40px;
  padding: 10px 30px; background-color: #333; font-weight: 700;
  color: white; letter-spacing: 1px;
  line-height: 1; text-transform: uppercase; text-align: center;
  }

<a class="button">Gallery</a>

Answer 4

If you want to keep it simple, stick to using just box-shadow instead of creating a triangle with more code.

For example:

.button {
  border: 1px solid pink;
  box-shadow: -10px 10px pink,-9px 9px pink,-8px 8px pink,-7px 7px pink,-6px 6px pink,-5px 5px pink,-4px 4px pink,-3px 3px pink,-2px 2px pink;
  
  display: inline-block; margin: 30px; position: relative; outline: none; font-size: 40px;
  padding: 10px 30px; background-color: #333; font-weight: 700;
  color: white; letter-spacing: 1px;
  line-height: 1; text-transform: uppercase; text-align: center;
}

<a class="button">Gallery</a>

If you want to avoid pixelated edges, simply add 1px inside each declaration.

.button{
 border: 1px solid pink;
 box-shadow: -10px 10px 1px pink,-9px 9px 1px pink,-8px 8px 1px pink,-7px 7px 1px pink,-6px 6px 1px pink,-5px 5px 1px pink,-4px 4px 1px pink,-3px 3px 1px pink,-2px 2px 1px pink,-1px 1px 1px pink,0px 0px 1px pink;
  
  display: inline-block; margin: 30px; position: relative; outline: none; font-size: 40px;
  padding: 10px 30px; background-color: #333; font-weight: 700;
  color: white; letter-spacing: 1px;
  line-height: 1; text-transform: uppercase; text-align: center;
  }

<a class="button">Gallery</a>

Answer 5

Answer №3

Try out this CSS code snippet

<style>
  .test {
    display: inline-block;
    padding: 20px;
    margin: 20px;
    background: #000;
    color: white;
    font-weight: bold;
    text-decoration: none;
  }

  .test.shape {
    position: relative;
    box-shadow: -1px 1px #FC2CFF, -2px 2px #FC2CFF, -3px 3px #FC2CFF, -4px 4px #FC2CFF, -5px 5px #FC2CFF;
    transition: all 0.1s ease-in;
  }

</style>

<body>
  <div class="test shape">Box with customized text style</div>
</body>

Answer 6

Try out this CSS code snippet

<style>
  .test {
    display: inline-block;
    padding: 20px;
    margin: 20px;
    background: #000;
    color: white;
    font-weight: bold;
    text-decoration: none;
  }

  .test.shape {
    position: relative;
    box-shadow: -1px 1px #FC2CFF, -2px 2px #FC2CFF, -3px 3px #FC2CFF, -4px 4px #FC2CFF, -5px 5px #FC2CFF;
    transition: all 0.1s ease-in;
  }

</style>

<body>
  <div class="test shape">Box with customized text style</div>
</body>

Answer 7

Answer №4

To achieve this effect, you can simply utilize the box-shadow property without needing to use :after or :before pseudo-elements. Check out the solution below:

.button {
  padding:10px;
  font-size: 30px;
  font-weight: bold;
  color: #FFF;
  display:inline-block;
  text-decoration:none;
  background: #333;
  border: solid 1px pink;
  box-shadow: -1px 0px 0px pink,-0px 1px 0px pink,
    -2px 1px 0px pink,-1px 2px 0px pink,
    -3px 2px 0px pink,-2px 3px 0px pink,
    -4px 3px 0px pink,-3px 4px 0px pink,
    -5px 4px 0px pink,-4px 5px 0px pink,
    -6px 5px 0px pink,-5px 6px 0px pink,
    -7px 6px 0px pink,-6px 7px 0px pink,
    -8px 7px 0px pink,-7px 8px 0px pink,
    -9px 8px 0px pink,-8px 9px 0px pink;
}

<a href="#" class="button">Gallery</a>

Pro Tip: To save time and effort, you can explore a library that provides various pre-designed button styles: . This way, you can easily incorporate stylish buttons into your projects.

Answer 8

To achieve this effect, you can simply utilize the box-shadow property without needing to use :after or :before pseudo-elements. Check out the solution below:

.button {
  padding:10px;
  font-size: 30px;
  font-weight: bold;
  color: #FFF;
  display:inline-block;
  text-decoration:none;
  background: #333;
  border: solid 1px pink;
  box-shadow: -1px 0px 0px pink,-0px 1px 0px pink,
    -2px 1px 0px pink,-1px 2px 0px pink,
    -3px 2px 0px pink,-2px 3px 0px pink,
    -4px 3px 0px pink,-3px 4px 0px pink,
    -5px 4px 0px pink,-4px 5px 0px pink,
    -6px 5px 0px pink,-5px 6px 0px pink,
    -7px 6px 0px pink,-6px 7px 0px pink,
    -8px 7px 0px pink,-7px 8px 0px pink,
    -9px 8px 0px pink,-8px 9px 0px pink;
}

<a href="#" class="button">Gallery</a>

Pro Tip: To save time and effort, you can explore a library that provides various pre-designed button styles: . This way, you can easily incorporate stylish buttons into your projects.

Answer 9

Answer №5

One effective approach for your situation would involve implementing the box-shadow property.

Additionally, you may find it helpful to explore this resource:

Answer 10

One effective approach for your situation would involve implementing the box-shadow property.

Additionally, you may find it helpful to explore this resource:

Creating a diagonal emboss effect with CSS

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Determine the selected radio button

A comprehensive guide on creating a package that combines an href link with an <li> element

Can someone point out the mistakes in my CSS Layout?

Disarray in the form elements

The dropdown login form is malfunctioning on my Wordpress website

jQuery can be used to relocate buttons on a webpage

Effortlessly move and place items across different browser windows or tabs

jQuery - Reveal one div while concealing another

Use Chrome developer tools to simulate mobile devices with navigation bars

What is the best way to pass an array to a child component in React?

The feature for choosing rows is not functioning properly when using materializecss in Tabulator

Exploring the world of jQuery and Ajax to retrieve a full HTML framework

Issue with setting a background image to a div in Next.js: not functioning as expected

Which element is able to utilize the inline-block style?

The height of the input element is greater than the size of the font

Using the section :export in the SCSS :root declaration

Conceal the calendar icon from the date-type HTML input field specifically on the Firefox

Is there a way to transform BASE64 encoded HTML into a GIF format using ColdFusion?

Fade in the background of table row clips using jQuery's fadeIn() method

Scrolling Horizontally with Bootstrap Cards