السلام عليكم و رحمة الله و بركاته

الازرار تعتبر من اهم العناصر في تصميم المواقع لانه يتم استخدامه في كل المواقع و اليوم سوف نتعرف على على 8 اشكال للازرار باستخدام css3

  1. style 1

    <style>
    .btn1 {
        height: 45px;
        padding: 0 7px;
        background-color: #27ae60;
        text-align: center;
        line-height: 45px;
        font-family: 'open sans';
        font-size: 14px;
        text-transform: capitalize;
        color: #f6f6f6;
        letter-spacing: .04em;
        outline: none;
        border: none;
        cursor: pointer;
        transition: background-color .4s ease, color .3s ease;
    }
    
    .btn1:hover {
        background-color:#58ca8c;
        color: #fff
    }
    </style>
    <button class="btn1">normal</button>
                
  2. style 2

    <style>
    .btn2 {
        width: 180px;
        height: 45px;
        padding: 0 7px;
        background-color: #fff;
        box-shadow: 0 0 0 1px #27ae60;
        text-align: center;
        line-height: 45px;
        font-family: 'open sans';
        font-size: 14px;
        text-transform: capitalize;
        color: #27ae60;
        letter-spacing: .04em;
        outline: none;
        border: none;
        cursor: pointer;
        transition: background-color .4s ease, color .3s ease;
    }
    
    .btn2:hover {
        box-shadow: 0 0 0 1px #58ca8c;
        background-color: #58ca8c;
        color: #fff
    }
    </style>
    <button class="btn2">style 2</button>
                
  3. style 3

    <style>
    .btn3 {
        width: 180px;
        height: 45px;
        padding: 0 7px;
        background-color: #fff;
        box-shadow: 0 0 0 1px #27ae60, inset 0px 0 0 #58ca8c;
        text-align: center;
        line-height: 45px;
        font-family: 'open sans';
        font-size: 14px;
        text-transform: capitalize;
        color: #27ae60;
        letter-spacing: .04em;
        outline: none;
        border: none;
        cursor: pointer;
        transition: all 1s ease;
    }
    
    .btn3:hover {
        box-shadow: 0 0 0 1px #58ca8c, inset 225px 0 0 1px #58ca8c;
        color: #fff
    }
    </style>
    <button class="btn3">style 3</button>
                
  4. style 4

    <style>
    .btn4 {
        width: 180px;
        height: 45px;
        padding: 0 7px;
        background-color: #fff;
        box-shadow: 0 0 0 1px #58ca8c, inset 0 0 0 0 #58ca8c;
        text-align: center;
        line-height: 45px;
        font-family: 'open sans';
        font-size: 14px;
        text-transform: capitalize;
        color: #27ae60;
        letter-spacing: .04em;
        outline: none;
        border: none;
        cursor: pointer;
        transition: all 1s ease;
    }
    
    .btn4:hover {
        box-shadow: 0 0 0 1px #58ca8c, inset 0 60px 0 -15px #58ca8c;
        color: #fff
    }
    </style>
    <button class="btn4">style 4</button>
                
  5. style 5

    <style>
    .btn5 {
        width: 180px;
        height: 45px;
        padding: 0 7px;
        background-color: #fff;
        box-shadow: 0 0 0 1px #58ca8c, inset 0 0 0 0 #58ca8c;
        text-align: center;
        line-height: 45px;
        font-family: 'open sans';
        font-size: 14px;
        text-transform: capitalize;
        color: #27ae60;
        letter-spacing: .04em;
        outline: none;
        border: none;
        cursor: pointer;
        transition: all 1s ease;
    }
    
    .btn5:hover {
        box-shadow: 0 0 0 1px #58ca8c, inset 0 -60px 0 -15px #58ca8c;
        color: #fff
    }
    </style>
    <button class="btn5">style 2</button>
                
  6. style 6

    <style>
    .btn6 {
        position: relative;
        width: 180px;
        height: 45px;
        padding: 0 7px;
        background-color: #fff;
        box-shadow: 0 0 0 1px #58ca8c, inset 0 0 0 0 #58ca8c;
        text-align: center;
        line-height: 45px;
        font-family: 'open sans';
        font-size: 14px;
        text-transform: capitalize;
        color: #27ae60;
        letter-spacing: .04em;
        outline: none;
        border: none;
        cursor: pointer;
        transition: all 1s ease;
    }
    
    .btn6 .btn-txt, 
    .btn6 .cloned-txt {
        text-align: center;
    }
    .btn6 .cloned-txt_outer {
        position: absolute;
        left:0;
        bottom:0;
        width: 100%; 
        height: 0; /*top*/
        text-align: center;
        overflow: hidden;
        transition: all 1s ease;
    }
    .btn6:hover .cloned-txt_outer {
        height: 100%; /*top*/
        top: 0;
    }
    .btn6 .cloned-txt {
        width: 100%;
        color: #fff;
        background-color: #58ca8c;
    }
    </style>
    <button class="btn7">
        <div class="btn-txt">
            slideing bg/txt left
        </div>
        <div class="cloned-txt_outer"> 
            <div class="cloned-txt">
                slideing bg/txt
            </div>
        </div>
    </button>
                
  7. style 7

    <style>
    .btn7 {
        position: relative;
        width: 180px;
        height: 45px;
        padding: 0 7px;
        background-color: #fff;
        box-shadow: 0 0 0 1px #58ca8c, inset 0 0 0 0 #58ca8c;
        text-align: center;
        line-height: 45px;
        font-family: 'open sans';
        font-size: 14px;
        text-transform: capitalize;
        color: #27ae60;
        letter-spacing: .04em;
        outline: none;
        border: none;
        cursor: pointer;
        transition: all 1s ease;
    }
    
    .btn7 .btn-txt, 
    .btn7 .cloned-txt {
        text-align: center;
    }
    .btn7 .cloned-txt_outer {
        position: absolute;
        left:0;
        top:0;
        width: 0; /*left*/
        height: 100%;
        overflow: hidden;
        transition: all 1s ease;
    }
    .btn7:hover .cloned-txt_outer {
        width: 100%; /*left*/
    }
    .btn7 .cloned-txt {
        width: 190px;
        color: #fff;
        background-color: #58ca8c;
        position: absolute;
        left: 0;
    }
    </style>
    <button class="btn7">
        <div class="btn-txt">
            slideing bg/txt left
        </div>
        <div class="cloned-txt_outer"> 
            <div class="cloned-txt">
                slideing bg/txt left
            </div>
        </div>
    </button>
                
  8. style 8

    <style>
    .btn8 {
        position: relative;
        width: 180px;
        height: 45px;
        padding: 0 7px;
        background-color: #fff;
        box-shadow: 0 0 0 1px #58ca8c, inset 0 0 0 0 #58ca8c;
        text-align: center;
        line-height: 45px;
        font-family: 'open sans';
        font-size: 14px;
        text-transform: capitalize;
        color: #27ae60;
        letter-spacing: .04em;
        outline: none;
        border: none;
        cursor: pointer;
        transition: all 1s ease;
    }
    
    .btn8 .btn-txt, 
    .btn8 .cloned-txt {
        text-align: center;
    }
    .btn8 .cloned-txt_outer {
        position: absolute;
        left:0;
        bottom:0;
        width: 100%; 
        height: 0; /*top*/
        text-align: center;
        overflow: hidden;
        transition: all 1s ease;
    }
    .btn8:hover .cloned-txt_outer {
        height: 100%; /*top*/
        top: 0;
    }
    .btn8 .cloned-txt {
        width: 100%;
        color: #fff;
        background-color: #58ca8c;
    }
    </style>
    <button class="btn8">
        <div class="btn-txt">
            slideing bg/txt left
        </div>
        <div class="cloned-txt_outer"> 
            <div class="cloned-txt">
                slideing bg/txt left
            </div>
        </div>
    </button>
    
    <button class="btn8">normal</button>