امروز میخواهم برای شما استایل انیمیشن زیبا و مدرن برای دکمه قرار بدهم، در بعضی از دکمه ها از جاوا برای زیبایی استفاده شده است.

قسمت HTML خیلی ساده است و فقط یک دکمه است که استایلها برایش داده شده:

<button class="btn btn-6 btn-6d">Button</button>

استایل مشترک تمام دکمه ها استایل .btn هست، و برای استایل خاص هر دکمه از شماره خاص استفاده شده است، در استایل برخی از دکمه ها از فونت آیکون استفاده شده است.

برای مثال استایل خاص یک دکمه به صورت زیر است:

/* Button 6d */
.btn-6d {
    border: 2px dashed #226fbe;
}

.btn-6d:hover {
    background: transparent;
    color: #226fbe;
}

در اسلایل .btn و btn-6 هیچ چز مشترکی وجود ندارد.

من این استایل را در نسخه دمو برای شما اینگونه قرار داده ام، شما در صورتی که بخواهید یک دکمه را در قالب خود قرار دهید بهتر از همه استایل ها را با هم در یک استایل قرار دهید.

امیدوارم که لذت برده باشید!

مشاهده دموی اسکریپتدریافت اسکریپت

۸ تیر ۱۳۹۲

امروز میخوام نمونه هایی از انیمیشن ها به روی آیکون ها که با رفتن نشانگر موس به روی آنها انجام میشود را آموزش بدم، این طرح رو میخواهیم با استفاده از انیمیشن CSS انجام بدهیم، فونت به کار رفته در این اسکریپت از فونت آیکون ( Eco Ico توسط Matthew Skiles ساخته شده توسط IcoMoon app ) است.

مشاهده دموی اسکریپتدریافت اسکریپت

نمونه ای از قسمت HTML

<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a">
    <a href="#" class="hi-icon hi-icon-mobile">Mobile</a>
    <a href="#" class="hi-icon hi-icon-screen">Desktop</a>
    <a href="#" class="hi-icon hi-icon-earth">Partners</a>
    <a href="#" class="hi-icon hi-icon-support">Support</a>
    <a href="#" class="hi-icon hi-icon-locked">Security</a>
</div>

یک نمونه از انمیشن چرخشی CSS

.hi-icon-effect-6 .hi-icon {
    box-shadow: 0 0 0 4px rgba(255,255,255,1);
    transition: background 0.2s, color 0.2s;   
}

.no-touch .hi-icon-effect-6 .hi-icon:hover {
    background: rgba(255,255,255,1);
    color: #64bb5d;
}

.no-touch .hi-icon-effect-6 .hi-icon:hover:before {
    animation: spinAround 2s linear infinite;
}

@keyframes spinAround {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg);
    }
}

توجه کنید کادر خط تیره در عنصر (border-radius: 50%) در فایرفاکس ۲۱ کار نمیکند (افکت شماره ۴).

امیدوارم که خوشتان آمده باشه و بتونید ازش استفاده لازم رو ببرید!

۲۹ خرداد ۱۳۹۲
بالا