اقدم لكم اليوم كود روعه جدا وطريقة جديدة وممتازة لزر معين تضيفه فى تصاميمك او اى مكان





طريقة وضع الكود
تضع الكود باى مكان يقبل ال html


اتمنى تعجبكم الكود


الرمــــــــــــــز


<style>
.holder {
    position: relative;
    margin: 20px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    float: right;
}
.first {
    background: rgb(255,255,255);
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(239,239,239,1) 100%);
 
  background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(255,255,255,1)),
color-stop(100%,rgba(239,239,239,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%);
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%);
    background: linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 );
    position: absolute;
    width: 50px;
    height: 50px;  
   top: 0;
    left: 0;  
   -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    border: 1px solid #ddd;
    filter:alpha(opacity=30);
    -moz-opacity: 0.3;
    opacity: 1;
    box-shadow: inset 0 0 1px 1px #fff,
                0 0 5px -1px #eee;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.holder:hover .first {
    left: -50px;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);
    filter:alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    z-index: 999;
  
}
.second {
    position: absolute;
    width: 50px;
    height: 50px;  
   top: 0;
    left: 0;
    z-index: -1;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    box-shadow: inset 0 1px 0px 0px rgba(255,255,255,0.5);
    border: 1px solid rgba(0,0,0,0.4);
}

.blue {
    background: rgb(22,114,201);

    background: -moz-linear-gradient(top,  rgba(22,114,201,1) 0%, rgba(0,79,153,1) 100%);
 
  background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(22,114,201,1)), color-stop(100%,rgba(0,79,153,1)));
    background: -webkit-linear-gradient(top,  rgba(22,114,201,1) 0%,rgba(0,79,153,1) 100%);
    background: -o-linear-gradient(top,  rgba(22,114,201,1) 0%,rgba(0,79,153,1) 100%);
    background: -ms-linear-gradient(top,  rgba(22,114,201,1) 0%,rgba(0,79,153,1) 100%);
    background: linear-gradient(top,  rgba(22,114,201,1) 0%,rgba(0,79,153,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1672c9', endColorstr='#004f99',GradientType=0 );
}
</style>
<div class="holder">  
   <div class="first"><br /> تعال هنا </div>
    <div class="second blue"><br /> ماذا تريد؟</div>
</div>