2

Button cut off corners sample

Hi all, I want to create a <button> like the one you can see in the above image, with background: transparent; border: 1px solid #999. I have checked a previous similar question with the same problem, but since it's 3 years old I would to check if there are better solutions.

Do you have an idea on how to achieve this result? Thanks in advance for your replies!

Improve this question
0

3 Answers 3

Reset to default
2

You could do something like this with :before and :after pseudo elements

body {
  background: white;
}
button {
  padding: 20px 45px;
  border: 1px solid #999999;
  display: inline-block;
  position: relative;
  background: white;
  color: #999999;
}
button:before, button:after {
  height: 25px;
  width: 25px;
  background: white;
  position: absolute;
  content: '';
}
button:before {
  top: 0;
  left: 0;
  border-right: 1px solid #999999;
  transform: rotate(49deg) translate(-71%);
}
button:after {
  bottom: 0;
  right: 0;
  border-left: 1px solid #999999;
  transform: rotate(49deg) translate(71%);
}
<button>CLICK ME</button>

Or you can use SVG

button {
  display: inline-block;
  background: transparent;
  border: none;
}
polygon {
  stroke: #999999;
  fill: transparent;
  stroke-width: 1px;
  transition: all 0.3s ease-in;
}
text {
  fill: #999999;
  font-size: 20px;
  transition: all 0.3s ease-in;
}
button:hover polygon {
  fill: black;
}
button:hover text {
  fill: white;
}
<button>
  <svg width="200px" height="100px">
    <polygon  points="165.083,84.769 15.971,84.769 15.971,28.227 33.742,11.263 185.114,11.263 185.114,66.837 "/>
    <text x="100" text-anchor="middle" y="55">CLICK ME</text>
  </svg>
</button>

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

This gets pretty close, but on retina monitors (and possibly others with subpixel rendering) the pseudo element's border does not perfectly meet the parent's border.
Same as @Vincent G, it's pretty close, but it would be cool to have it with a transparent background
I can't see it on my monitor but it can be adjusted with transform: rotate() translate();
@d_z90 i updated my answer.
1

Here's a JS fiddle with a little trick I use with :before and :after.

See this fiddle

button { background: #fff; padding: 8px 10px; border: 1px solid #333; box-shadow: none; position: relative;  }

button:before {content: ""; width: 10px; height: 15px; position: absolute; border-right: 1px solid #333; left: -5px; top: -6px; transform: rotate(45deg); background: #fff}

button:after {content: ""; width: 10px; height: 15px; position: absolute; border-left: 1px solid #333; right: -5px; bottom: -6px; transform: rotate(45deg); background: #fff}

You can replace background of :before and :after with yours to fit it correctly.

Improve this answer

2 Comments

This gets pretty close, but on retina monitors (and possibly others with subpixel rendering) the pseudo element's border does not perfectly meet the parent's border.
It's a good solution, but if you set background: transparent it doesn't look good anymore.
-2

you should not use transparent background you should use url property like this

.selector{
    background: url(imageAddress);
  }

Improve this answer

2 Comments

Can you explain why? OP isn't trying to create the button with the use of an image, but with the use of borders.
I was also thinking to use a svg as image, but first I want to see if it's possible to make it in pure css

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.