How to cut out the corner of button without losing the after pseudo-elements

user_14912123 0
Viewed 33

I want to style the button with a straight cut bottom right corner but I got the problem. the problem is when I use clip-path in css the after pseudo-elements disappear

My button:

my button right now

What I want:

button that I want

I used clip-path but the after pseudo-elements disappear

enter image description here

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Lao:wght@500;700&display=swap');
body {
  height: 100vh;
  background-color: rgba(8, 41, 85, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-52 {
  clip-path: polygon(100% 0, 100% 69%, 92% 100%, 0 99%, 0 0);
  font-family: "Noto Sans Lao";
  padding: .5rem 2rem;
  font-weight: bold;
  font-size: 16px;
  font-weight: 200;
  letter-spacing: 1px;
  outline: 0;
  border: none;
  cursor: pointer;
  position: relative;
  background-color: #fff;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: ease-in .2s;
  
}

.button-52:after {
  content: "";
  background-color: transparent;
  border: 3px solid #fff;
  width: 95%;
  z-index: -1;
  position: absolute;
  height: 95%;
  bottom: 4px;
  right: 8px;
}

.button-52:hover {
  transform: scale(1.07)
}
<button class="button-52" role="button">ຂໍ້ມູນເພີ່ມເຕີມ</button>

css html javascript
2 Answers

You can "extend" clip-path to include the ::after element:

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Lao:wght@500;700&display=swap');
body {
  height: 100vh;
  background-color: rgba(8, 41, 85, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-52 {
  clip-path: polygon(100% -20%, 100% 69%, 92% 100%, -20% 99%, -20% -20%);
  font-family: "Noto Sans Lao";
  padding: .5rem 2rem;
  font-weight: bold;
  font-size: 16px;
  font-weight: 200;
  letter-spacing: 1px;
  outline: 0;
  border: none;
  cursor: pointer;
  position: relative;
  background-color: #fff;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: ease-in .2s;
}

.button-52:after {
  content: "";
  background-color: transparent;
  border: 3px solid #fff;
  width: 95%;
  z-index: -1;
  position: absolute;
  height: 95%;
  bottom: 4px;
  right: 8px;

}

.button-52:hover {
  transform: scale(1.07)
}
<button class="button-52" role="button">ຂໍ້ມູນເພີ່ມເຕີມ</button>

user_29300380

Use a gradient coloration on the button

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Lao:wght@500;700&display=swap');
body {
  height: 100vh;
  background-color: rgba(8, 41, 85, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-52 {
  font-family: "Noto Sans Lao";
  padding: .5rem 2rem;
  font-weight: bold;
  font-size: 16px;
  font-weight: 200;
  letter-spacing: 1px;
  border: none;
  cursor: pointer;
  position: relative;
  background:linear-gradient(-45deg,#0000 8px, #fff 0);
  touch-action: manipulation;
  transition: ease-in .2s;
  
}

.button-52:after {
  content: "";
  position: absolute;
  inset: -6px 8px 4px -6px; 
  border: 3px solid #fff;
}

.button-52:hover {
  transform: scale(1.07)
}
<button class="button-52" role="button">ຂໍ້ມູນເພີ່ມເຕີມ</button>

user_86203330
Related