زیبایی در قالب وب سایت ، مهمترین دلیل جذب کاربران جدید است . 

قصد داریم آموزش css سورس کدی را خدمتتان معرفی کنیم که میتواند تغییری هر چند ناچیز اما مهم در لینک های سایت شما ایجاد کند . 

با استفاده از این سورس کد css میتوانید براحتی یک ماوس هاور mouse hover یا همان قرار گیری ماوس بر روی لینک های سایت ایجاد کنید . 

البته در این مثال ما بر روی تگ H1 کار خواهیم کرد که فقط کافیست جای تگ h1 را با a عوض کنید و یا هر المان دیگری که بخواهید جایگزی آن نمائید . 

نتیجه نهایی :

کد های HTML :

<h1>Hover Me</h1>

کد های CSS :

h1::before {  
    transform: scaleX(0);
    transform-origin: bottom right;
}

h1:hover::before {
    transform: scaleX(1);
    transform-origin: bottom left;
}

h1::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0 0 0 0;
    background: #F83C3B;
    z-index: -1;
    transition: transform .3s ease;
}

h1 {
    position: relative;
    font-size: 5rem;
    color: #ffffff;
}

html {
    block-size: 100%;
    inline-size: 100%;
}

body {
    min-block-size: 100%;
    min-inline-size: 100%;
    margin: 0;
    box-sizing: border-box;
    display: grid;
    place-content: center;
    font-family: system-ui, sans-serif;
    background: #374D64;
}

@media (orientation: landscape) {
    body {
        grid-auto-flow: column;
    }
}

دانلود سورس کد 

سورس کد را هم میتوانید از لینک پیوست شده در ابتدای صفحه دانلود نمائید . 

سوال بود در تالارگفتمان مطرح نمائید .

موفق باشید