متحرک سازی دکمه با CSS3

[CodePlus]

قابلیت های CSS3 هر روز گسترده تر می شود

در این آموزش شما را با متحرک سازی دکمه توسط CSS3 آشنا می کنم

توجه داشته باشید که این قابلیت فقط در مرورگرهایی که از CSS3 پشتبانی می کنند قابل استفاده می باشد.

پیش نمایش


​

گام اول : ساختار HTML

ساختار HTML بسیار ساده می باشد . توجه کنید که همه عناصر داخل تگ span باشند

<a href="#" class="a-btn">
                        <span class="a-btn-slide-text"> 20R</span>
                        <img src="images/icons/1.png" alt="Photos" />
                        <span class="a-btn-text"><small>Idehdesign</small>Download</span>
                        <span class="a-btn-icon-right"><span></span></span>
                    </a>

گام دوم : ساختار CSS

.a-btn{
    background: linear-gradient(top, #a9db80 0%,#96c56f 100%);
    padding-left: 90px;
    padding-right: 105px;
    height: 90px;
    display: inline-block;
    position: relative;
    border: 1px solid #80ab5d;
    box-shadow:
        0px 1px 1px rgba(255,255,255,0.8) inset,
        1px 1px 3px rgba(0,0,0,0.2);
    border-radius: 4px;
    float: left;
    clear: both;
    margin: 10px 0px;
    overflow: hidden;
    transition: box-shadow 0.3s ease-in-out;
}
.a-btn img{
    position: absolute;
    left: 15px;
    top: 13px;
    border: none;
    transition: all 0.3s ease-in-out;
}
.a-btn .a-btn-slide-text{
    position: absolute;
    font-size: 36px;
    top: 18px;
    left: 18px;
    color: #6d954e;
    opacity: 0;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.4);
    transition: opacity 0.2s ease-in-out;
}
.a-btn-text{
    padding-top: 13px;
    display: block;
    font-size: 30px;
    text-shadow: 0px -1px 1px #80ab5d;
}
.a-btn-text small{
    display: block;
    font-size: 11px;
    letter-spacing: 1px;
}
.a-btn-icon-right{
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    width: 80px;
    border-left: 1px solid #80ab5d;
    box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
    width: 38px;
    height: 38px;
    opacity: 0.7;
    border-radius: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -20px 0px 0px -20px;
    border: 1px solid rgba(0,0,0,0.5);
    background: #4e5c50 url(../images/arrow_down.png) no-repeat center center;
    box-shadow:
        0px 1px 1px rgba(255,255,255,0.3) inset,
        0px 1px 2px rgba(255,255,255,0.5);
    transition: all 0.3s ease-in-out;
}

در حالت Hover

.a-btn:hover{
    box-shadow:
        0px 1px 1px rgba(255,255,255,0.8) inset,
        1px 1px 5px rgba(0,0,0,0.4);
}
.a-btn:hover img{
    transform: scale(10);
    opacity: 0;
}
.a-btn:hover .a-btn-slide-text,
.a-btn:hover .a-btn-icon-right span{
    opacity: 1;
}

در حالت Active

.a-btn:active {
    position:relative;
    top:1px;
    background:#80ab5d;
    box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    border-color: #a9db80;
}
.a-btn:active .a-btn-icon-right span{
    transform: scale(1.4);
}