How can create css3 button? - css

Question

How can I create a button like the picture by css3 ?
I've tried the following code.
<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>
but got like this output:
Whats the exact way to create curved border of buttons and thin curve between two buttons ?
-Thanks.
EDIT: according to your answers I've made this :
<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>
play
pause
output:
is it ok for standard website ?

Answer 1

Here you go:-
<style type="text/css">
.left,.right,a{
float:left;
border-style:solid;
width:0px;
height:0px;
border-radius: 3px;
}
.left{
border-color: 0A0D6A;
border-width:10px 0px 10px 30px;
}
.right{
border-color: 6568B9 6568B9 6568B9 0A0D6A;
border-width:10px 30px 10px 8px;
margin-left:-3px;
}
</style>
<div>
<div class="left"></div>
<div class="right"></div>
</div>
Creating the white boundary between the blues with pure css is tricky. Same goes for the "speaker" and "play" icons but i'm sure in future, CSS4 will make this one easier for all of us :). In the mean time, simple images will work fine.
EDIT:- Here's 2 ways of getting the "color change on hover" effect you requested:
Method #1, harnessing the css "hover selector" of the parent div
<style type="text/css">
.left,.right,a{
float:left;
border-style:solid;
width:0px;
height:0px;
border-radius: 3px;
}
.left{
border-color:#0A0D6A;
border-width:10px 0px 10px 30px;
}
.right{
border-color:#6568B9 #6568B9 #6568B9 #0A0D6A;
border-width:10px 30px 10px 8px;
margin-left:-3px;
}
#top:hover .left{ border-color:#00FF55;cursor:pointer; }
#top:hover .right{ border-color:#6568B9 #6568B9 #6568B9 #00FF55; }
</style>
<div id=top>
<div class="left"></div>
<div class="right"></div>
</div>
Method #2 harnessing the css "next sibling selector" of the .left classed div
<style type="text/css">
.left,.right,a{
float:left;
border-style:solid;
width:0px;
height:0px;
border-radius: 3px;
}
.left{
border-color:#0A0D6A;
border-width:10px 0px 10px 30px;
}
.right{
border-color:#6568B9 #6568B9 #6568B9 #0A0D6A;
border-width:10px 30px 10px 8px;
margin-left:-3px;
}
.left:hover { border-color:#00FF55;cursor:pointer; }
.left:hover +div{ border-color:#6568B9 #6568B9 #6568B9 #00FF55; }
</style>
<div>
<div class="left"></div>
<div class="right"></div>
</div>
Check whether they both work on iexplore < 9

Answer 2

Actually the best solution to this is that.......... the button is three images... if you want to use the two parts of buttons separately.
1st - The left side button
2nd - The junction where you see the transition
3rd - The right side part.
You can also use color and image.
1st - The left side button color
2nd - The junction where you see the transition image
3rd - The right side button color.
This is the way most of the webpages do..