باکس باز شو با css3

دسته بندی ها : اخبار سایت 7 ژانویه 2015 خانه وردپرس 859 بازدید

بنا بر درخواست دوستان یک نمونه از باکس های مورد استفاده در قالب سایت خانه وردپرس رو به رایگان در اختیارتون قرار میدیم امیدوارم لذت ببرید

نکته : این کد مربوط به نسخه سوم سی اس اس می باشد (CSS3)

نکته: برای دیدن دمو آنلاین به پائین همین صفحه  مراجعه کرده و بر روی قسمت پیام مدیر موس خود را نگه دارید

<a href="#" class="a-btn">
    <span class="a-btn-text">Register now</span>
    <span class="a-btn-slide-text">Get a promotion</span>
    <span class="a-btn-icon-right"><span></span></span>
</a>

برای این کار ابتدا کد زیر را در محل دلخواه خود قرار دهید:

.a-btn{
    background: linear-gradient(top, #feda71 0%,#febb4a 100%);
    border: 1px solid #f5b74e;
    border-color: #f5b74e #e5a73e #d6982f;
    box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395; 
    padding: 0px 80px 0px 10px;
    height: 38px;
    display: inline-block;
    position: relative;
    border-radius: 4px;
    float: left;
    margin: 10px;
    overflow: hidden;
    transition: all 0.3s linear;
}
.a-btn-text{
    padding-top: 5px;
    display: block;
    font-size: 18px;
    white-space: nowrap;
    color: #996633;
    text-shadow: 0 1px 0 #fedd9b;
    transition: all 0.3s linear;
}
.a-btn-slide-text{
    position:absolute;
    top: 35px;
    left: 0px;
    width: auto;
    right: 52px;
    height: 0px;
    background: #fff;
    color: #996633;
    font-size: 13px;
    white-space: nowrap;
    font-family: Georgia, serif;
    font-style: italic;
    text-indent: 15px;
    overflow: hidden;
    line-height: 30px;
    box-shadow:
        -1px 0px 1px rgba(255,255,255,0.4),
        1px 1px 1px rgba(0,0,0,0.5) inset;
    transition: height 0.3s linear;
}
.a-btn-icon-right{
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    width: 52px;
    border-left: 1px solid #f5b74e;
    box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
    width: 38px;
    height: 38px;
    opacity: 0.7;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -20px 0px 0px -20px;
    background: transparent url(../images/arrow_right.png) no-repeat 50% 55%;
    transition: all 0.3s linear;
}

افکت ها:

کد های زیر را به css قالب خود اضافه کنید

.a-btn:hover{
    height: 65px;
    box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
}
.a-btn:hover .a-btn-text{
    text-shadow: 0px 1px 1px rgba(0,0,0,0.2);
    color: #fff;
}
.a-btn:hover .a-btn-slide-text{
    height: 30px;
}
.a-btn:hover .a-btn-icon-right span{
    opacity: 1;
    transform: rotate(-45deg);
}

 

.a-btn:active {
    position:relative;
    top:1px;
    background: linear-gradient(top, #fec354 0%,#fecd61 100%); /* W3C */
    border-color: #d29a3a #cc9436 #c89133;
    text-shadow: 0 1px 0 #fee1a0;
    box-shadow: 0 1px 1px #d4d4d4, inset 0 1px 0 #fed17e; 
}

 


تمام شد حالا شما از یک باکس زیبا همانن باکس خانه ورد پرس برخوردارید

مطالب زیر را حتما بخوانید:

قوانین ارسال دیدگاه در سایت

  • چنانچه دیدگاهی توهین آمیز باشد و متوجه اشخاص مدیر، نویسندگان و سایر کاربران باشد تایید نخواهد شد.
  • چنانچه دیدگاه شما جنبه ی تبلیغاتی داشته باشد تایید نخواهد شد.
  • چنانچه از لینک سایر وبسایت ها و یا وبسایت خود در دیدگاه استفاده کرده باشید تایید نخواهد شد.
  • چنانچه در دیدگاه خود از شماره تماس، ایمیل و آیدی تلگرام استفاده کرده باشید تایید نخواهد شد.
  • چنانچه دیدگاهی بی ارتباط با موضوع آموزش مطرح شود تایید نخواهد شد.

نظرات کاربران

    دیدگاهتان را بنویسید

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    Time limit is exhausted. Please reload CAPTCHA.

    این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

    لینک کوتاه :
    0