0
209
ViewsHow to cut out the corner of button without losing the after pseudo-elements
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:
What I want:
I used clip-path but the after pseudo-elements disappear
@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>
·
Juan Pablo Isaza
2 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
0
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>
·
Juan Pablo Isaza
Report
Answer question