CSS3 Button 5

by Unknown 02:59 0 comments css3 CSS3 Button

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet">
<h1>Administration bar with buttons and icons</h1>
<h2>hint: try to toggle click on buttons</h2>
<div class="button-group-navigation">
    <li><a class="btn" href="#">&#x263b;</a></li>
    <li><a class="btn" href="#">&#x263a;</a></li>
    <li><a class="btn" href="#">&#x2729;</a></li>
    <li><a class="btn" href="#">&#x2740;</a></li>
    <li><a class="btn" href="#">&#x2741;</a></li>
</div>
<style>
body{
 background:#54282b;
}
h1 {
 font-size:30px;
 font-family: 'Lato', sans-serif;
 color:#fff;
}
h2 {
 font-size:25px;
 font-family: 'Lato', sans-serif;
 color:#fff;
}
.btn {
    padding:30px 40px;
 margin: 0 1px 0 0;
 text-decoration: none;
 text-align: center;
 color: #fff;
 font-size:40px;
 cursor: pointer;
 background: #2c3e50;
 border-bottom: 10px solid #34495e;
}
.btn.active{
    border-bottom: 10px solid #2ecc71;
 transition-property:border-bottom .6s ease-in-out 0s;
 -moz-transition:border-bottom .6s ease-in-out 0s;
 -webkit-transition:border-bottom .6s ease-in-out 0s;
 -o-transition:border-bottom .6s ease-in-out 0s;
 color:#2ecc71;
 box-shadow:0 5px 25px #fff,0 -5px 25px #fff,-5px 0 25px #fff,0 0px 0px #fff inset;
 transition-property:box-shadow .6s ease-in-out 0.5s;
 -moz-transition:box-shadow .6s ease-in-out 0.5s;
 -webkit-transition:box-shadow .6s ease-in-out 0.5s;
 -o-transition:box-shadow .6s ease-in-out 0.5s;
}
.button-group-navigation li {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
    zoom: 1;
 background:#7f8c8d;
}

.button-group-navigation li .btn {
    float: left;
    margin-left:-4px;
}

.button-group-navigation > .btn:not(:first-child):not(:last-child),
.button-group-navigation li:not(:first-child):not(:last-child) .btn {
    border-radius: 0;
}

.button-group-navigation > .btn:first-child,
.button-group-navigation li:first-child .btn {
    margin-left: 0;
}

.button-group-navigation > .btn:last-child,
.button-group-navigation li:last-child > .btn {
    margin-right:0;

}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.min.js"></script>
<script>

$(window).load(function(){
$('a.btn').click(function(){
    $( this ).toggleClass( "active" );
});
});
</script>