CSS3 UI Buttons Set

I just saw the amazing art work by Alessio Atzeni for creating UI Buttons Design. I just converted the PSD to HTML5 and CSS3, so lets start with it. This tut will be having two set of buttons blue and black.

Each button has three states: normal, hover and active.



The css selectors will be :hover and :active.

I will be using Foundation-Icons font for getting the icon image instead of using an image.

---

Blue Set

---

HTML :
[html]
<a class="blue">a</a>
[/html]


CSS:
[css]
.blue{
background-image:-moz-linear-gradient(top,transparent,rgba(0,0,0,0.2));
background-image:-webkit-linear-gradient(top,transparent,rgba(0,0,0,0.2));
background-image:-o-linear-gradient(top,transparent,rgba(0,0,0,0.2));

-webkit-transition:all 0.1s linear;
-moz-transition:all 0.1s linear;
-o-transition:all 0.1s linear;
-ms-transition:all 0.1s linear;
transition:all 0.1s linear;

background-color: #5683b1;
/*font-family:icons;*/
border-top:1px solid #8bbfd7;
border-radius: 50% 50% 50% 50%;
font-size: 15px;
font-weight: bold;
color:#24272a;
text-shadow:0 1px 0 #5a92ba;
box-shadow: 0 5px 6px #1C1F22;
cursor: default;
text-align: center;
width: 33px;
height: 33px;
float: left;
margin: 10px;
font-family:icons;
}

.blue:hover{
background-color: #5f94bc;
}

.blue:active{
background-color: #3a6a9b;
box-shadow: 0 0 3px #323638 inset;
border: 1px solid #3c4246;
}
[/css]

---

Black Set

---

HTML:
[html]
<p class="blackMask">
<a class="black">a</a>
</p>
[/html]

CSS:
[css]
.black{
background-image:-moz-linear-gradient(top,transparent,rgba(0,0,0,0.2));
background-image:-webkit-linear-gradient(top,transparent,rgba(0,0,0,0.2));
background-image:-o-linear-gradient(top,transparent,rgba(0,0,0,0.2));
-webkit-transition:all 0.1s linear;
-moz-transition:all 0.1s linear;
-o-transition:all 0.1s linear;
-ms-transition:all 0.1s linear;
transition:all 0.1s linear;


background-color: #464d53;
/*font-family:icons;*/
border-top:1px solid #626c74;
border-radius: 50% 50% 50% 50%;
font-size: 15px;
font-weight: bold;
color:#191919;
text-shadow:0 1px 0 #485258;
box-shadow: 0 3px 6px #1f2225;
cursor: default;
text-align: center;
width: 33px;
height: 33px;
float: left;
margin: 7px;
font-family:icons;
}

.black:hover{
background-color: #4b575f;
color:#00b7fb;
text-shadow:0 0 5px #39748c;
}

.black:active{
background-color: #2f383d;
box-shadow: 0 0 3px #323638 inset;
border: 1px solid #20292e;
color:#191919;
text-shadow:0 1px 0 #485258;
}

.blackMask{
background-image:-moz-linear-gradient(top,transparent,rgba(0,0,0,0.2));
background-image:-webkit-linear-gradient(top,transparent,rgba(0,0,0,0.2));
background-image:-o-linear-gradient(top,transparent,rgba(0,0,0,0.2));
background-color:#30363a;
border-radius: 50% 50% 50% 50%;
float: left;
width:47px;
position: relative;
height:47px;
margin: 10px;
border-top:1px solid #3c4247;
border-bottom:1px solid #4a5155;
}

.black:before {
background: none repeat scroll 0 0 transparent;
border-bottom: 1px solid #4F555A;
border-radius: 50% 50% 50% 50%;
border-top: 1px solid #373C40;
content: "";
height: 50px;
left: -2px;
position: absolute;
top: -3px;
width: 50px;
}
[/css]


These buttons can be used widely and advantages of using it, no images, fully flexible and customizable and it can be applied to any container a, button, span, p etc.

Thanks to Alessio, for creating the buttons Design.