نتیجه نهایی که بدست می آورید:
html
<!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>دکمه شبیه تصویر — Hover follow</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="btn-wrap">
<button class="power-btn" id="powerBtn" aria-label="power button">
<div class="glow" id="glow"></div>
<img decoding="async" src="https://team.barangads.com/wp-content/uploads/2025/12/play-button-arrowhead_27223.png" alt="power icon" class="icon" id="svgIcon">
</button>
</div>
<script>
(function(){
const btn = document.getElementById('powerBtn');
const glow = document.getElementById('glow');
function setPos(xPercent, yPercent){
btn.style.setProperty('--x', xPercent + '%');
btn.style.setProperty('--y', yPercent + '%');
}
btn.addEventListener('mouseenter', (e)=>{
btn.classList.add('hover');
});
btn.addEventListener('mousemove', (e)=>{
const rect = btn.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
setPos(x, y);
});
btn.addEventListener('mouseleave', ()=>{
btn.classList.remove('hover');
setPos(50, 50);
});
btn.addEventListener('focus', ()=>{
btn.classList.add('hover');
setPos(50,50);
});
btn.addEventListener('blur', ()=>{
btn.classList.remove('hover');
});
setPos(50,50);
})();
</script>
</body>
</html>
css
:root{
--size: 150px; /* اندازه دکمه — میتونی عوض کنی */
--knob-bg: #f7f9fb; /* رنگ پایه داخل دکمه */
--accent: #ff6ea8; /* رنگ هاله/آیتم مرکزی (قابل تغییر) */
--rim-depth: 12px; /* عمق حاشیه داخلی */
--soft-shadow: 12px; /* سایه کلی */
--x: 50%; --y: 50%; /* مختصات موس (css vars) */
}
html,body{
height:100%;
margin:0;
background:var(--bg);
font-family: "Segoe UI", Tahoma, Roboto, "Helvetica Neue", Arial;
display:flex;
align-items:center;
justify-content:center;
direction: rtl;
}
/* کانتینر دکمه */
.btn-wrap{
width:var(--size);
height:var(--size);
display:flex;
align-items:center;
justify-content:center;
user-select:none;
}
/* خود دکمه */
.power-btn{
position:relative;
width:100%;
height:100%;
border-radius:36%;
background: linear-gradient(180deg, rgba(255,255,255,0.95), var(--knob-bg));
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
outline:none;
border:0;
transition: transform .18s ease;
box-shadow:
0 6px 18px rgba(5,15,30,0.08),
inset 0 2px 8px rgba(255,255,255,0.9);
overflow:visible;
}
/* حلقه خالی اطراف */
.power-btn::before{
content:"";
position:absolute;
inset:12px;
border-radius: calc(36% - 7px);
background: var(--knob-bg);
box-shadow:
inset 0 8px 16px rgba(0,0,0,0.06),
inset 0 -6px 10px rgba(255,255,255,0.8);
pointer-events:none;
}
/* آیکون */
.icon {
width:44%;
height:44%;
z-index:3;
filter: drop-shadow(0 1px 0 rgba(255,255,255,0.7));
transition: transform .18s ease;
}
/* هاله */
.glow {
pointer-events:none;
position:absolute;
inset:0;
z-index:2;
border-radius:36%;
mix-blend-mode:normal;
transition: opacity .18s linear;
opacity:0;
}
.glow::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
background:
radial-gradient(
circle at var(--x) var(--y),
color-mix(in srgb, var(--accent) 80%, transparent 15%) 0%,
color-mix(in srgb, var(--accent) 30%, transparent 55%) 20%,
rgba(0,0,0,0) 65%
);
filter: blur(10px) saturate(110%);
transform: translateZ(0);
-webkit-mask:
radial-gradient(circle, transparent 55%, black 56%);
mask:
radial-gradient(circle, transparent 45%, black 46%);
z-index:2;
}
.power-btn.hover{
transform: translateY(-4px);
}
.power-btn .glow { opacity:1; }
@media (pointer: coarse) {
.power-btn::before { inset:10px; }
.glow::before {
-webkit-mask: radial-gradient(circle, transparent 50%, black 51%);
mask: radial-gradient(circle, transparent 50%, black 51%);
}
}
.power-btn:focus {
box-shadow: 0 6px 18px rgba(5,15,30,0.09), 0 0 0 4px rgba(255,110,160,0.06);
}
دکمههای حرفهای HTML & CSS برای استفاده در طراحی سایت
اگر در زمینه طراحی سایت، فرانت اند، وردپرس یا UI فعالیت میکنی، حتماً میدونی که یک دکمه حرفه ای چقدر میتونه روی تجربه کاربری (UX) تاثیر بذاره.
اینجا ۴ مدل از دکمه هایی که با HTML و CSS خالص طراحی کردیم قرار دادیم تا بتونی راحت و رایگان ازشون در سایتت استفاده کنی.
این دکمه ها:
انیمیشن Hover حرفه ای دارن با حرکت موس، هاله رنگی در لبه ها ایجاد میکنن کاملاً واکنش گرا هستن بدون نیاز به هیچ کتابخونه ای (کاملاً Vanilla CSS/JS) مناسب پروژه های وردپرسی، المنتوری، طراحی UI و صفحات لندینگ
تمام آیکن ها قابل تغییر هستن و رنگ هاله ی هر دکمه نیز به راحتی از طریق متغیرهای CSS قابل شخصیسازی است.
چرا این دکمه ها برای طراحان سایت مناسب اند؟
ظاهر مدرن و مینیمال
مناسب تم های وردپرسی
سازگار با تمام مرورگرها
بسیار سبک و بدون بار اضافه
قابل استفاده در لندینگ پیج ها، فروشگاه اینترنتی، فرم ها و حتی Game UI
اگر با HTML و CSS کار میکنی، این دکمهها میتونن آمادهترین و تمیزترین نمونههایی باشن که میشه مستقیم در پروژه استفاده کرد.
چطور رنگ هاله یا آیکون را عوض کنم؟
خیلی ساده:
.btn-wrap2 {
--accent: #4da3ff;
}
کافیه رنگ دلخواهت رو جایگزین کد رنگ کنی.
برای تصویر هم فقط لینک آیکون را عوض میکنی و تمام.
مناسب برای چه کسانی؟
طراحان سایت
توسعهدهندگان فرانتاند
طراحان UI/UX
طراحان صفحات وردپرسی و المنتور
دانشجویان برنامهنویسی وب
هرکسی که میخواد یک دکمه خفن به سایتش اضافه کنه
این دکمهها یک نمونه عالی از طراحی تمیز، سبک و مدرن با HTML و CSS هستند.
استفاده از جلوههای نرم، سایههای لایهای و هاله رنگی، ظاهری حرفهای ایجاد میکنه که میتونی توی هر پروژهای به کار ببری.
