CODEWITHSUNDEEP
css
user1844626
user1844626

Reputation: 1868

How can create css3 button?

How can I create a button like the picture by css3 ?

enter image description here

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:

enter image description here

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>

<a href="javascript:void();" class="left">play</a>
<a href="javascript:void();" class="middle"></a>
<a href="javascript:void();" class="right">pause</a>

output:

enter image description here

is it ok for standard website ?

Upvotes: 1

Views: 146

Answers (2)

mrmoje
mrmoje

Reputation: 3732

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.
enter image description here

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

Upvotes: 2

Veer Shrivastav
Veer Shrivastav

Reputation: 5496

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..

Upvotes: 2

Related Questions