سبد خرید

بستن سبد خرید

سبد خرید شما خالی است.

تعداد محصول: 0 کل قیمت: تومان0

ایجاد افکت برای دکمه

ایجاد افکت برای دکمه که در این سورس کد یا پروژه توسط تیم شاه کد با استفاده از HTML و CSS و به همراه دانلود پروژه در اختبار شما قرار می دهیم.

افکت هاور دکمه با استفاده از HTML و CSS

با یکی دیگر از سری آموزش‌ طراحی سایت و طراحی‌های خلاقانه با HTML و CSS که در این آموزش شما یاد می گیرید که چگونه به دکمه ها تنها با استفاده از CSS یک افکت انیمیشنی بسیار زیبا بدهید.

 

کد های HTML:

<!-- DOCTYPE -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Button Hover</title>
        <link rel="icon" type="img/png" href="/img/LogoS.png" />
        <!-- Required meta tags always come first -->
        <meta name="author" content="Shah Code">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="wrapper">
            <div class="btn">
                <button type="button">Hover me</button>
            </div>
        </div>
    </body>
</html>

 

کدهای CSS:
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
}
body {
    height: 100vh;
    background: #151519;
}
button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
button {
    background: none;
    color: #ccc;
    width: 240px;
    height: 80px;
    border: 1px solid #338033;
    font-size: 18px;
    border-radius: 4px;
    transition: .6s;
    overflow: hidden;
}
button:focus {
    outline: none;
}
button::before{
    content: '';
    display: block;
    position: absolute;
    background: rgba(255,255,255,.5);
    width: 60px;
    height: 100%;
    left: 0;
    top: 0;
    opacity: .5s;
    filter: blur(30px);
    transform: translateX(-130px) skewX(-15deg);
}
button::after {
    content: '';
    display:block;
    position: absolute;
    background: rgba(255,255,255,.2);
    width: 30px;
    height: 100%;
    left: 30px;
    top: 0;
    opacity: 0;
    filter: blur(30px);
    transform: translate(-100px) scaleX(-15deg);
}
button:hover {
    background: #338033;
    cursor: pointer;
}
button:hover:before {
    transform: translateX(300px) skewX(-15deg);
    opacity: .6;
    transition: .7s;
}
button:hover:after {
    transform: translateX(300px) skewX(-15deg);
    opacity: 1;
    transition: .7s;
}

 

پست های مشابه

19تیر 1400

CSS چیست و نقش آن در طراحی وب سایت که در این پست، طراحی و ساخت سایت را توضیح می دهیم، پس با ما همراه باشید. امروزه نرم افزارهایی برای طراحی وب سایت پدید آمده است که این امکان را می دهد که حتی بدون نیاز به دانش برنامه نویسی وب سایتی تولید و توسعه […]

63

0

28خرداد 1400

نمایش لودینگ یا نوار بارگذاری با CSS ، در این مقاله نحوه ی پروژه ایجاد لودینگ یا نوار بارگذاری کامل صفحه وب که با CSS نوشته شده را توضیح میدهیم.نمایش لودینگ صفحه یا بارگذاری کامل آن Preloader

93

0

27خرداد 1400

این پروژه ی بوم برخورددهنده به این صورت است که وقتی بوم ها یا مربع ها باهم برخورد می کنند…

39

0

دیدگاه و پرسش