How to create a button with the top left and bottom right corner is 45 degrees straight angle?

Admin 1
Viewed 1470

I want to create a button with the top left and bottom right corner is 45 degrees straight angle. Can such a button be created in HTML/CSS? Or I have to use the image? Please guide.
This is a button image. enter image description here

and this is a code

button{
border-style: none;
height: 60px;
background: none;
border: 2px solid #000000;
padding: 0 60px;
color: #000000;
font-size: 24px;
outline: none;
border-radius: 50px 0;
}
<button>Button</button>

button border css html javascript
2 Answers

Use clip-path polygon inside another:

<div style="
background:black;
width:fit-content;
height:fit-content;
clip-path:polygon(
0px 36px, 
36px 0px, 
100% 0px, 
100% calc(100% - 36px), 
calc(100% - 36px) 100%, 
0px 100%, 
0px 36px
);">
<button style="
outline:none;
box-shadow:none;
border:none;
font-size:24px;
padding: 18px 60px;
overflow:hidden;
background:pink;
clip-path:polygon(
2px 36px, 
37px 2px, 
calc(100% - 2px) 2px, 
calc(100% - 2px) calc(100% - 36px), 
calc(100% - 36px) calc(100% - 2px), 
2px calc(100% - 2px), 
2px 36px
);"
onclick="alert('Hi!')"
>BUTTON</button>
</div>

user_57925090

You can get that shape using :before and :after css selector. I have added span in button tag and :before and :after selector in both tags to get this shape.

button{
  border-style: none;
  height: 60px;
  background: none;
  border: none;
  padding: 0 60px;
  color: #000000;
  font-size: 24px;
  outline: none;
  position: relative;
}
button:before {
  content: "";
  width: 85%;
  height: 30px;
  display:block;
  border-top: 2px solid;
  border-right: 2px solid;
  position: absolute;
  right: 0;
  top: 0;
}

button:after {
  content: "";
  width: 85%;
  height: 30px;
  display:block;
  border-bottom: 2px solid;
  border-left: 2px solid;
  position: absolute;
  left: 0;
  bottom: 0;
}
button span {
  display:block;
}
button span:before {
  content:"";
  width: 38px;
  height: 2px;
  background: #000;
  position: absolute;  
  left: -5px;
  top: 14px;
  transform: rotate(-46deg); 
}
button span:after {
  content:"";
  width: 38px;
  height: 2px;
  background: #000;
  position: absolute;
  right: -5px;
  bottom: 14px;
  transform: rotate(-46deg);
}
button:hover{
  color: red;
}
button:hover:before,
button:hover:after {
  border-color: red;
}
button:hover span:before,
button:hover span:after {
  background: red;
}
<button><span>Button</span></button>

user_63641900
Related