Is there a way to create a rounded button as shown in the picture using CSS (without using Canvas or SVG)?
edit: i'm not talking about border-radius, see the image
3 Answers
This is possible using :after and :before :pseudo-elements.
div {
position: relative;
margin: 30px;
width: 150px;
height: 100px;
background: #FF5656;
border-radius: 1000px / 200px;
}
div:after, div:before {
position: absolute;
content: '';
width: 10px;
height: 72%;
border-top-left-radius: 200px 1000px;
border-bottom-left-radius: 200px 1000px;
left: -6px;
top: 14%;
background: #FF5656;
}
div:after {
border-radius: 0;
border-top-right-radius: 200px 1000px;
border-bottom-right-radius: 200px 1000px;
left: calc(100% - 4px);
}<div></div>Applying these borders to an input element:
Since, you can't apply :pseudo-elements to input elements, you'll have to apply the :after and :before :pseudo-elements to its container.
input {
width: 150px;
height: 100px;
background: #FF5656;
border-radius: 1000px / 200px;
border: 0;
cursor: pointer;
color: black;
font-size: 16px;
}
input::-moz-focus-inner {
border: 0;
}
input:focus {
outline: none;
}
.btn-container {
position: relative;
width: 150px;
height: 100px;
margin: 30px;
}
.btn-container:after,
.btn-container:before {
position: absolute;
content: '';
width: 10px;
height: 72%;
border-top-left-radius: 200px 1000px;
border-bottom-left-radius: 200px 1000px;
left: -6px;
top: 14%;
background: #FF5656;
}
.btn-container:after {
border-radius: 0;
border-top-right-radius: 200px 1000px;
border-bottom-right-radius: 200px 1000px;
left: calc(100% - 4px);
}<div class="btn-container">
<input type="button" value="Button" />
</div>As @misterManSam mentioned in comments, you could also use a button element to avoid using a container.
button {
position: relative;
width: 150px;
height: 100px;
background: #FF5656;
border-radius: 1000px / 200px;
border: 0;
cursor: pointer;
color: black;
font-size: 16px;
}
button::-moz-focus-inner {
border: 0;
}
button:focus {
outline: none;
}
button:after,
button:before {
position: absolute;
content: '';
width: 10px;
height: 72%;
border-top-left-radius: 200px 1000px;
border-bottom-left-radius: 200px 1000px;
left: -6px;
top: 14%;
background: #FF5656;
}
button:after {
border-radius: 0;
border-top-right-radius: 200px 1000px;
border-bottom-right-radius: 200px 1000px;
left: calc(100% - 4px);
}<button>Button</button>
2 Comments
jbutler483
got there before me, I see :P
misterManSam
Might as well use
<button> instead of <input>... no need for the container.#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
}
Comments
try this
<input type='button' class='rectangle' />
css
.rectangle{
width: 150px;
height: 100px;
background-color:red;
border:1px solid red;
border-radius: 25px;
}
