0
199
ViewsCómo cortar la esquina del botón sin perder los pseudo-elementos posteriores
Quiero diseñar el botón con una esquina inferior derecha de corte recto, pero tengo el problema. el problema es cuando uso clip-path en css después de que desaparecen los pseudo-elementos
Mi botón:
Lo que quiero:
Usé clip-path pero los pseudo-elementos posteriores desaparecen
@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
Puede "extender" el clip-path para incluir el elemento ::after :
@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 una coloración degradada en el botón
@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