I am trying to create a button using only CSS and no images. The problem is the lower left and upper right corners, and I use the background color to achieve this when the button is on a solid background color. The problem is that the background is not a solid color, and you can see the corners, as in the demo below.
So, I would suggest a universal way to encode this button only with CSS and without images.
Thank!
Below is a demonstration of the button →
Here is the HTML I have in my demo:
<div id="banner">
<div id="button-box">
<a class="btn-cornered btn-cornered-dark-bg" href="#"><span>Learn More</span></a>
</div>
</div>
And CSS:
#banner {
background: url('https://d3vv6lp55qjaqc.cloudfront.net/items/2D1R0A0B1q031R1C2P26/Image%202017-11-07%20at%201.57.17%20PM.png?X-CloudApp-Visitor-Id=8b9380dd59b56afec49e5f1e289c6692&v=53edcac2') no-repeat center -420px;
background-size: cover;
display: block;
width: 100%;
height: 200px;
text-align: center;
}
#button-box {
padding: 50px 0;
}
.btn-cornered {
padding-left: 20px;
padding-right: 20px;
position: relative;
display: inline-block;
line-height: 53px;
text-align: center;
color: #fff;
font-size: 24px;
border: 1px solid #fff;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
text-decoration: none;
}
.btn-cornered:before {
position: absolute;
left: -1px;
bottom: -1px;
content: "";
border-bottom: 11px solid #fff;
border-right: 11px solid transparent;
}
.btn-cornered:after {
position: absolute;
left: -2px;
bottom: -2px;
content: "";
border-bottom: 11px solid;
border-right: 11px solid transparent;
}
.btn-cornered span {
top: -2px;
left: -1px;
position: relative;
padding-right: 20px;
display: block;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.btn-cornered span:before {
position: absolute;
content: "";
border-bottom: 11px solid transparent;
border-right: 11px solid #fff;
}
.btn-cornered span:after {
position: absolute;
content: "";
border-bottom: 11px solid transparent;
border-right: 11px solid;
}
.btn-cornered-dark-bg {
height: 53px;
}
.btn-cornered-dark-bg:after {
border-bottom-color: #000000;
}
.btn-cornered-dark-bg span {
max-width: none;
line-height: 58px;
font-size: 24px;
height: 53px;
width: calc(100% + 2px);
}
.btn-cornered-dark-bg span:before {
right: 1px;
top: 1px;
}
.btn-cornered-dark-bg span:after {
border-right-color: #000;
right: 0px;
top: 0px;
}
source
share