Can someone help me with creating a button using CSS3 that looks like the one in the image?
I attempted the code below.
<style type="text/css">
.left,
.right{
float:left;
border-style:solid;
width:0px;
height:0px;
}
.left{
border-color: red green red green;
border-width:15px 0px 15px 75px;
}
.right{
border-color: green green green red;
border-width:15px 20px 15px 35px;
}
</style>
<div>
<div class="left"></div>
<div class="right"></div>
</div>
However, the output was not as expected.
What is the correct way to create curved borders for buttons and a thin curve between two buttons?
-Thank you.
EDIT: I have made some changes according to the suggestions:
<style type="text/css">
.left,
.middle,
.right{
height:30px;
display:block;
float:left;
text-decoration:none;
position: relative;
text-align:center;
color:black;
}
.left,
.right{
padding:0px 10px;
line-height: 30px;
}
.left{
background-color:red;
width:60px;
border-bottom-left-radius: 17px;
border-top-left-radius: 17px;
}
.middle{
background-color:#ddd;
width:2px;
}
.right{
background-color:green;
width:40px;
border-bottom-right-radius: 17px;
border-top-right-radius: 17px;
}
.middle::before{
content: "";
position: absolute;
top: 5px;
margin-top: -5px;
border-width: 15px;
border-style: solid;
border-color: #ddd transparent #ddd transparent;
left: -15px;
}
.right::before{
content: "";
position: absolute;
top: 5px;
margin-top: -5px;
border-width: 15px;
border-style: solid;
border-color: green transparent green transparent;
left: -15px;
}
.left:hover{
background-color:blue;
}
.right:hover{
background-color:orange;
}
.right:hover::before{
border-color: orange transparent orange transparent;
}
</style>
<a href="javascript:void();" class="left">play</a>
<a href="javascript:void();" class="middle"></a>
<a href="javascript:void();" class="right">pause</a>
Output:
Is this design suitable for a standard website?