آموزش افکتی زیبا برای حالت hover یک لینک با CSS

حتما به عنوان یک طراح وب میدانید که یک سایت در عین سادگی باید زیبا باشد تا نظر مخاطبان را جلب کند. امروز با آموزش یک افکت زیبا برای حالت هاور شدن لینک ها در خدمت شما هستیم.

دموی این افکت زیبا را از این قسمت مشاهده کنید.

Array[free_vip]

می توانید کدهای این افکت زیبا را در قسمت زیر مشاهده کنید و  در انتهای مطلب دموی آن دانلود نمایید :

کدهای html این افکت :

در قسمت html حتما باید تگ a را درون یک تگ دیگر مانند div, span, … قرار دهید. همچنین متنی که در تگ a استفاده میکنید باید به عنوان مقدار صفت data-hover در این تگ نوشته شود.

[html]
<div class="cl-effect-10" id="cl-effect-10">
    <a href="#cl-effect-10" data-hover="Desultory">Desultory</a>
    <a href="#cl-effect-10" data-hover="Sumptuous">Sumptuous</a>
    <a href="#cl-effect-10" data-hover="Scintilla">Scintilla</a>
    <a href="#cl-effect-10" data-hover="Propinquity">Propinquity</a>
    <a href="#cl-effect-10" data-hover="Harbinger">Harbinger</a>
</div>
[/html]

کدهای css این افکت :

[html]
<style type="text/css">
        *,
        *:after,
        *::before {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        body {
            font-family: ‘Raleway’, sans-serif;
            background-color: #9e487f;
        }

        div {
            text-align: center;
            margin: 100px auto;
        }

        div a {
            position: relative;
            display: inline-block;
            margin: 15px 25px;
            outline: none;
            cursor: pointer;
            color: #fff;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 400;
            text-shadow: 0 0 1px rgba(255,255,255,0.3);
            font-size: 1.35em;
        }

        div a:hover,
        div a:focus {
            outline: none;
        }

        /* Effect 10: text fill based on Lea Verou’s animation http://dabblet.com/gist/6046779 */
        .cl-effect-10 a {
            padding: 10px 0;
            border-top: 2px solid #0972b4;
            color: #0972b4;
            text-shadow: none;
        }

        .cl-effect-10 a::before {
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
            padding: 10px 0;
            max-width: 0;
            border-bottom: 2px solid #fff;
            color: #fff;
            content: attr(data-hover);
            -webkit-transition: max-width 0.5s;
            -moz-transition: max-width 0.5s;
            transition: max-width 0.5s;
        }

        .cl-effect-10 a:hover::before,
        .cl-effect-10 a:focus::before {
            max-width: 100%;
        }
    </style>
[/html]

[onliner_button type=”edu-demo” url=’https://onliner.ir/demo-education/css/hover-link1/hove-link1-onliner.ir.zip’]دانلود دمو[/onliner_button]

[/free_vip]

دیدگاه خود را برای ما ارسال کنید

No Comments