|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"/> |
|
<title>ul.buttongroup</title> |
|
<style> |
|
ul.buttongroup { |
|
font-family: 'Arial', sans-serif; |
|
margin: 0; |
|
padding: 0; |
|
display: inline-block; |
|
font-size: 11px; |
|
font-weight: bold; |
|
list-style: none; |
|
background-color: #999; |
|
background-image: -webkit-gradient(linear, left top,left bottom ,color-stop(0,#ccc), color-stop(1.00,#999)); |
|
background-image: -moz-linear-gradient(left top -90deg, rgba(229,229,229,1) 0%, rgba(102,102,102,1) 100%); |
|
border: 1px solid #999; |
|
-webkit-border-radius: 4px; |
|
-moz-border-radius: 4px; |
|
border-radius: 4px; |
|
-webkit-user-select:none; |
|
-moz-user-select:none; |
|
} |
|
ul.buttongroup li, |
|
ul.buttongroup li.disabled:active, |
|
ul.buttongroup li.disabled:hover { |
|
color: #666; |
|
cursor: pointer; |
|
float: left; |
|
margin: 0; |
|
margin-left: 1px; |
|
padding: 5px 10px; |
|
background: #f3f3f3; |
|
background: -webkit-gradient(linear, left top, left bottom,color-stop(0,rgba(253,253,253,1)), color-stop(1.00,rgba(228,228,228,1))), #f3f3f3; |
|
background: -moz-linear-gradient(left top -90deg, rgba(243,243,243,1) 0%, rgba(228,228,228,1) 100%), #f3f3f3; |
|
text-shadow: #fff 0 1px 0; |
|
-webkit-box-shadow: inset rgba(255,255,255,1) 1px 1px 0px; |
|
-moz-box-shadow: inset rgba(255,255,255,1) 1px 1px 0px; |
|
box-shadow: inset rgba(255,255,255,1) 1px 1px 0px; |
|
} |
|
ul.buttongroup li:first-child { |
|
margin-left: 0; |
|
-webkit-border-radius: 3px 0 0 3px; |
|
-moz-border-radius: 3px 0 0 3px; |
|
border-radius: 3px 0 0 3px; |
|
border-left: none; |
|
} |
|
ul.buttongroup li:last-child { |
|
-webkit-border-radius: 0 3px 3px 0; |
|
-moz-border-radius: 0 3px 3px 0; |
|
border-radius: 0 3px 3px 0; |
|
} |
|
ul.buttongroup li:hover, |
|
ul.buttongroup li.hover { |
|
color: rgba(0,0,0,0.7); |
|
background: #deecf0; |
|
background: -webkit-gradient(linear, left top, left bottom,color-stop(0,#fff), color-stop(1,rgba(214,235,242,1))), #deecf0; |
|
background: -moz-linear-gradient(left top -90deg, #fff 0%, rgba(214,235,242,1) 100%), #deecf0; |
|
} |
|
ul.buttongroup li:active, |
|
ul.buttongroup li.active { |
|
color: rgba(0,0,0,0.8); |
|
-webkit-box-shadow: inset rgba(0,80,100,0.3) 1px 2px 2px; |
|
-moz-box-shadow: inset rgba(0,80,100,0.3) 1px 2px 2px; |
|
border-left: 1px solid #999; |
|
border-top: 1px solid #aaa; |
|
padding-left: 9px; |
|
padding-bottom: 4px; |
|
text-shadow: none; |
|
} |
|
ul.buttongroup li.disabled, |
|
ul.buttongroup li.disabled:hover { |
|
color: #ccc; |
|
cursor: default; |
|
text-shadow: none; |
|
} |
|
ul.buttongroup li.disabled:active { |
|
color: #ccc; |
|
border: none; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<ul class="buttongroup"> |
|
<li>First item</li> |
|
<li>Second item</li> |
|
<li>Third item</li> |
|
</ul> |
|
|
|
<ul class="buttongroup"> |
|
<li>Normal button</li> |
|
<li class="hover">Hover</li> |
|
<li class="hover active">Active</li> |
|
<li class="disabled">Disabled</li> |
|
</ul> |
|
|
|
</body> |
|
</html> |
Nice work! Revamped, without disabled part, for a dark background using Sass & Compass just for fun