ایجاد افکت برای دکمه که در این سورس کد یا پروژه توسط تیم شاه کد با استفاده از 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;
}
دیدگاه و پرسش