دکمه‌های هاور یکی از عناصر کلیدی در طراحی وب هستند که تعامل کاربران با سایت را بهبود می‌بخشند. این دکمه‌ها به هنگام قرارگیری نشانگر ماوس بر روی آن‌ها، می‌توانند تغییراتی جذاب و دینامیک را به نمایش بگذارند. از این رو، استفاده صحیح و هوشمندانه از افکت‌های هاور می‌تواند تجربه کاربری را به طور قابل توجهی افزایش دهد و به ایجاد حس ارتباط و تعامل در میان کاربران کمک کند. افکت‌های دکمه‌ها می‌توانند شامل تغییر رنگ، تغییر سایز، افکت‌های سایه و انیمیشن‌های نرم باشند که هر کدام هویت و جذابیت خاصی به طراحی وب‌سایت می‌بخشند. به عنوان مثال، تغییر رنگ دکمه‌ها به هنگام هاور، توجه کاربر را جلب کرده و او را به عمل مورد نظر تشویق می‌کند. همچنین انیمیشن‌های ملایم باعث می‌شوند که تغییرات به صورت طبیعی و نرم به نظر برسند و از ایجاد سردرگمی در کاربران جلوگیری کنند. در طراحی این افکت ها نهایت دقت انجام شده تا علاوه بر جلب توجه، تجربه‌ای مثبت برای کاربر فراهم آورد. استفاده بهینه و متناسب از این افکت‌ها می‌تواند به بهبود قابلیت دسترسی و افزایش زمان ماندگاری کاربران در وب‌سایت کمک کند. به همین دلیل، طراحان وب باید به طراحی دکمه‌های هاور به عنوان یک عنصر استراتژیک در تعاملات دیجیتال توجه ویژه‌ای داشته باشند.
کد HTML
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charrow="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>هاور دکمه‌های متحرک با CSS</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.woocommerce .blockUI.blockOverlay::before{--wpr-bg-8d2dae36-0516-48dd-97d0-0b7ba955ec23: url('https://elementor.ir/wp-content/plugins/woocommerce/assets/images/icons/loader.svg');}.woocommerce .loader::before{--wpr-bg-98eb6b84-ae4e-4516-8c1a-7012a08a928b: url('https://elementor.ir/wp-content/plugins/woocommerce/assets/images/icons/loader.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.visa,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.visa,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.visa{--wpr-bg-64251451-3426-4593-bb95-4598a68e2490: url('https://elementor.ir/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/visa.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.mastercard{--wpr-bg-e97a7dee-ce3d-48f1-b2d7-e6ea1f328b42: url('https://elementor.ir/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/mastercard.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.laser,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.laser,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.laser{--wpr-bg-e1215990-36dc-4ad9-a9b7-9687c2664166: url('https://elementor.ir/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/laser.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.dinersclub{--wpr-bg-3907f694-8d2b-4df4-9f70-48f6c8b750fe: url('https://elementor.ir/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/diners.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.maestro{--wpr-bg-80f5233e-e0dc-459c-a10b-a029a2a3c78e: url('https://elementor.ir/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/maestro.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.jcb{--wpr-bg-6372c82a-a86e-44c5-93fd-557004518d11: url('https://elementor.ir/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/jcb.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.amex,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.amex,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.amex{--wpr-bg-ae841f20-3801-4c4d-bea3-58fd247044ab: url('https://elementor.ir/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/amex.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.discover,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.discover,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.discover{--wpr-bg-0feed9b1-623d-4487-84e5-bd630073800a: url('https://elementor.ir/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/discover.svg');}.jet-image-accordion__item-loader span{--wpr-bg-79302883-c1d7-4a3e-b904-b91244ab94d4: url('https://elementor.ir/wp-content/plugins/jet-tabs/assets/images/spinner-32.svg');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".woocommerce .blockUI.blockOverlay","style":".woocommerce .blockUI.blockOverlay::before{--wpr-bg-8d2dae36-0516-48dd-97d0-0b7ba955ec23: url('https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/loader.svg');}","hash":"8d2dae36-0516-48dd-97d0-0b7ba955ec23","url":"https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/loader.svg"},{"selector":".woocommerce .loader","style":".woocommerce .loader::before{--wpr-bg-98eb6b84-ae4e-4516-8c1a-7012a08a928b: url('https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/loader.svg');}","hash":"98eb6b84-ae4e-4516-8c1a-7012a08a928b","url":"https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/loader.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.visa,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.visa,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.visa","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.visa,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.visa,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.visa{--wpr-bg-64251451-3426-4593-bb95-4598a68e2490: url('https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/visa.svg');}","hash":"64251451-3426-4593-bb95-4598a68e2490","url":"https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/visa.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.mastercard","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.mastercard{--wpr-bg-e97a7dee-ce3d-48f1-b2d7-e6ea1f328b42: url('https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/mastercard.svg');}","hash":"e97a7dee-ce3d-48f1-b2d7-e6ea1f328b42","url":"https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/mastercard.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.laser,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.laser,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.laser","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.laser,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.laser,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.laser{--wpr-bg-e1215990-36dc-4ad9-a9b7-9687c2664166: url('https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/laser.svg');}","hash":"e1215990-36dc-4ad9-a9b7-9687c2664166","url":"https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/laser.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.dinersclub","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.dinersclub{--wpr-bg-3907f694-8d2b-4df4-9f70-48f6c8b750fe: url('https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/diners.svg');}","hash":"3907f694-8d2b-4df4-9f70-48f6c8b750fe","url":"https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/diners.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.maestro","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.maestro{--wpr-bg-80f5233e-e0dc-459c-a10b-a029a2a3c78e: url('https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/maestro.svg');}","hash":"80f5233e-e0dc-459c-a10b-a029a2a3c78e","url":"https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/maestro.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.jcb","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.jcb{--wpr-bg-6372c82a-a86e-44c5-93fd-557004518d11: url('https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/jcb.svg');}","hash":"6372c82a-a86e-44c5-93fd-557004518d11","url":"https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/jcb.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.amex,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.amex,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.amex","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.amex,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.amex,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.amex{--wpr-bg-ae841f20-3801-4c4d-bea3-58fd247044ab: url('https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/amex.svg');}","hash":"ae841f20-3801-4c4d-bea3-58fd247044ab","url":"https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/amex.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.discover,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.discover,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.discover","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.discover,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.discover,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.discover{--wpr-bg-0feed9b1-623d-4487-84e5-bd630073800a: url('https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/discover.svg');}","hash":"0feed9b1-623d-4487-84e5-bd630073800a","url":"https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/discover.svg"},{"selector":".jet-image-accordion__item-loader span","style":".jet-image-accordion__item-loader span{--wpr-bg-79302883-c1d7-4a3e-b904-b91244ab94d4: url('https:\/\/elementor.ir\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg');}","hash":"79302883-c1d7-4a3e-b904-b91244ab94d4","url":"https:\/\/elementor.ir\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<div class="container">
<section id="row-1">
<div class="k_ahi-wrap k_ahi-effect-8">
<a href="" class="k_ahi k_ahi-material"><i class="k_ahi-material-icons">settings</i></a>
</div>
<div class="k_ahi-wrap k_ahi-effect-4 k_ahi-effect-4a">
<a href="" class="k_ahi k_ahi-material"><i class="k_ahi-material-icons">shopping_cart</i></a>
</div>
<div class="k_ahi-wrap k_ahi-effect-4 k_ahi-effect-4b">
<a href="" class="k_ahi k_ahi-material"><i class="k_ahi-material-icons">delete</i></a>
</div>
<div class="k_ahi-wrap k_ahi-effect-4 k_ahi-effect-4c">
<a href="" class="k_ahi k_ahi-material"><i class="k_ahi-material-icons">call</i></a>
</div>
</section>
<section id="row-2">
<div class="k_ahi-wrap k_ahi-effect-3 k_ahi-effect-3a">
<a href="" class="k_ahi k_ahi-material"><i class="k_ahi-material-icons">star</i></a>
</div>
<div class="k_ahi-wrap k_ahi-effect-3 k_ahi-effect-3b">
<a href="" class="k_ahi k_ahi-material"><i class="k_ahi-material-icons">favorite</i></a>
</div>
<div class="k_ahi-wrap k_ahi-effect-5 k_ahi-effect-5a">
<a href="" class="k_ahi k_ahi-material"><i class="k_ahi-material-icons">alarm</i></a>
</div>
<div class="k_ahi-wrap k_ahi-effect-6">
<a href="" class="k_ahi k_ahi-material"><i class="k_ahi-material-icons">search</i></a>
</div>
</section>
<section id="row-3">
<div class="k_ahi-wrap k_ahi-effect-1 k_ahi-effect-1a">
<a href="" class="k_ahi k_ahi-material"><i class="k_ahi-material-icons">home</i></a>
</div>
<div class="k_ahi-wrap k_ahi-effect-1 k_ahi-effect-1b">
<a href="" class="k_ahi k_ahi-material"><i class="k_ahi-material-icons">event</i></a>
</div>
<div class="k_ahi-wrap k_ahi-effect-2 k_ahi-effect-2a">
<a href="" class="k_ahi k_ahi-material"><i class="k_ahi-material-icons">search</i></a>
</div>
<div class="k_ahi-wrap k_ahi-effect-2 k_ahi-effect-2b">
<a href="" class="k_ahi k_ahi-material"><i class="k_ahi-material-icons">done</i></a>
</div>
</section>
<section id="row-4">
<div class="k_ahi-wrap k_ahi-effect-9 k_ahi-effect-9a">
<a href="" class="k_ahi k_ahi-material"><i class="k_ahi-material-icons">clear</i></a>
</div>
<div class="k_ahi-wrap k_ahi-effect-9 k_ahi-effect-9b">
<a href="" class="k_ahi k_ahi-material"><i class="k_ahi-material-icons">mail</i></a>
</div>
<div class="k_ahi-wrap k_ahi-effect-7 k_ahi-effect-7a">
<a href="" class="k_ahi k_ahi-material"><i class="k_ahi-material-icons">send</i></a>
</div>
<div class="k_ahi-wrap k_ahi-effect-7 k_ahi-effect-7b">
<a href="" class="k_ahi k_ahi-material"><i class="k_ahi-material-icons">attach_file</i></a>
</div>
</section>
<section id="row-5">
<div class="k_ahi-wrap k_ahi-effect-7 k_ahi-effect-7d">
<a href="" class="k_ahi k_ahi-material"><i class="k_ahi-material-icons">cloud</i></a>
</div>
<div class="k_ahi-wrap k_ahi-effect-7 k_ahi-effect-7h">
<a href="" class="k_ahi k_ahi-material"><i class="k_ahi-material-icons">file_upload</i></a>
</div>
<div class="k_ahi-wrap k_ahi-effect-7 k_ahi-effect-7e">
<a href="" class="k_ahi k_ahi-material"><i class="k_ahi-material-icons">laptop</i></a>
</div>
<div class="k_ahi-wrap k_ahi-effect-7 k_ahi-effect-7i">
<a href="" class="k_ahi k_ahi-material"><i class="k_ahi-material-icons">keyboard_voice</i></a>
</div>
</section>
<section id="row-6">
<div class="k_ahi-wrap k_ahi-effect-7 k_ahi-effect-7c">
<a href="" class="k_ahi k_ahi-material"><i class="k_ahi-material-icons">panorama</i></a>
</div>
<div class="k_ahi-wrap k_ahi-effect-7 k_ahi-effect-7j">
<a href="" class="k_ahi k_ahi-material"><i class="k_ahi-material-icons">photo_camera</i></a>
</div>
</section>
</div>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
کد CSS
.k_ahi-effect-1 .k_ahi,.k_ahi-effect-6 .k_ahi{-webkit-transition:background .2s,color .2s;-moz-transition:background .2s,color .2s}body{background:#F44336}@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:local('Material Icons'),local('MaterialIcons-Regular'),url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2')}.k_ahi-wrap{text-align:center;margin:0 auto;padding:2em 0 3em;float:left;width:25%}.k_ahi{display:inline-block;cursor:pointer;margin:15px 30px;width:90px;height:90px;border-radius:50%;position:relative;z-index:1}.k_ahi-material-icons{font-family:'Material Icons';font-weight:400;font-style:normal;font-size:50px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;wk_ahite-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smootk_ahing:antialiased;color:#FFF;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}.k_ahi:after{pointer-events:none;position:absolute;width:100%;height:100%;border-radius:50%;content:'';-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.k_ahi-effect-1 .k_ahi{background:rgba(255,255,255,.1);transition:background .2s,color .2s}.k_ahi-effect-1a .k_ahi:hover,.k_ahi-effect-1a .k_ahi:hover .k_ahi-material-icons,.k_ahi-effect-1b .k_ahi:hover,.k_ahi-effect-1b .k_ahi:hover .k_ahi-material-icons{background:rgba(255,255,255,1);color:#F44336}.k_ahi-effect-1 .k_ahi:after{top:-7px;left:-7px;padding:7px;box-shadow:0 0 0 4px #fff;-webkit-transition:-webkit-transform .2s,opacity .2s;-webkit-transform:scale(.8);-moz-transition:-moz-transform .2s,opacity .2s;-moz-transform:scale(.8);-ms-transform:scale(.8);transition:transform .2s,opacity .2s;transform:scale(.8);opacity:0}.k_ahi-effect-1a .k_ahi:hover:after{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}.k_ahi-effect-2 .k_ahi:after,.k_ahi-effect-3 .k_ahi:after{top:-2px;left:-2px;padding:2px;z-index:-1;background:#fff}.k_ahi-effect-1b .k_ahi:after{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.k_ahi-effect-1b .k_ahi:hover:after{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}.k_ahi-effect-2a .k_ahi:hover:after,.k_ahi-effect-9a .k_ahi:hover:after{-webkit-transform:scale(.85);-moz-transform:scale(.85);-ms-transform:scale(.85)}.k_ahi-effect-2 .k_ahi{color:#F44336;box-shadow:0 0 0 3px #fff;-webkit-transition:color .3s;-moz-transition:color .3s;transition:color .3s}.k_ahi-effect-2 .k_ahi:after{-webkit-transition:-webkit-transform .2s,opacity .2s;-moz-transition:-moz-transform .2s,opacity .2s;transition:transform .2s,opacity .2s}.k_ahi-effect-2a .k_ahi .k_ahi-material-icons,.k_ahi-effect-2a .k_ahi:hover,.k_ahi-effect-2a .k_ahi:hover .k_ahi-material-icons{color:#F44336}.k_ahi-effect-2a .k_ahi:hover:after{transform:scale(.85)}.k_ahi-effect-2b .k_ahi:hover:after{-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0;-webkit-transition:-webkit-transform .4s,opacity .2s;-moz-transition:-moz-transform .4s,opacity .2s;transition:transform .4s,opacity .2s}.k_ahi-effect-2b .k_ahi:hover,.k_ahi-effect-2b .k_ahi:hover .k_ahi-material-icons{color:#fff}.k_ahi-effect-2b .k_ahi .k_ahi-material-icons{color:#F44336}.k_ahi-effect-3 .k_ahi{box-shadow:0 0 0 4px #fff;-webkit-transition:color .3s;-moz-transition:color .3s;transition:color .3s}.k_ahi-effect-3 .k_ahi:after{-webkit-transition:-webkit-transform .2s,opacity .3s;-moz-transition:-moz-transform .2s,opacity .3s;transition:transform .2s,opacity .3s}.k_ahi-effect-4a .k_ahi,.k_ahi-effect-4b .k_ahi:hover{-webkit-transition:box-shadow .2s;-moz-transition:box-shadow .2s}.k_ahi-effect-3a .k_ahi{color:#f06060}.k_ahi-effect-3a .k_ahi .k_ahi-material-icons{color:#F44336}.k_ahi-effect-3a .k_ahi:hover,.k_ahi-effect-3a .k_ahi:hover .k_ahi-material-icons,.k_ahi-effect-3b .k_ahi{color:#fff}.k_ahi-effect-3a .k_ahi:hover:after{-webkit-transform:scale(1.3);-moz-transform:scale(1.3);-ms-transform:scale(1.3);transform:scale(1.3);opacity:0}.k_ahi-effect-3b .k_ahi:hover .k_ahi-material-icons{color:#F44336}.k_ahi-effect-3b .k_ahi:after{-webkit-transform:scale(1.3);-moz-transform:scale(1.3);-ms-transform:scale(1.3);transform:scale(1.3);opacity:0}.k_ahi-effect-3b .k_ahi:hover:after{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}.k_ahi-effect-4 .k_ahi{width:92px;height:92px;box-shadow:0 0 0 4px rgba(255,255,255,1)}.k_ahi-effect-4a .k_ahi{transition:box-shadow .2s}.k_ahi-effect-4 .k_ahi:before{line-height:92px}.k_ahi-effect-4 .k_ahi:after{top:-4px;left:-4px;padding:0;z-index:10;border:4px dashed #fff}.k_ahi-effect-4 .k_ahi:hover{box-shadow:0 0 0 0 rgba(255,255,255,0);color:#fff}.k_ahi-effect-4b .k_ahi:hover{transition:box-shadow .2s}.k_ahi-effect-4b .k_ahi:hover:after{-webkit-animation:k_ahi-spinaround 9s linear infinite;-moz-animation:k_ahi-spinaround 9s linear infinite;animation:k_ahi-spinaround 9s linear infinite}@-webkit-keyframes k_ahi-spinaround{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes k_ahi-spinaround{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(360deg)}}@keyframes k_ahi-spinaround{from{transform:rotate(0)}to{transform:rotate(360deg)}}.k_ahi-effect-4c .k_ahi:hover{-webkit-transition:box-shadow .2s;-moz-transition:box-shadow .2s;transition:box-shadow .2s}.k_ahi-effect-4c .k_ahi:hover:after{-webkit-animation:k_ahi-spinaround2 9s linear infinite;-moz-animation:k_ahi-spinaround2 9s linear infinite;animation:k_ahi-spinaround2 9s linear infinite}@-webkit-keyframes k_ahi-spinaround2{from{-webkit-transform:rotate(360deg)}to{-webkit-transform:rotate(0)}}@-moz-keyframes k_ahi-spinaround2{from{-moz-transform:rotate(360deg)}to{-moz-transform:rotate(0)}}@keyframes k_ahi-spinaround2{from{transform:rotate(360deg)}to{transform:rotate(0)}}.k_ahi-effect-5 .k_ahi{box-shadow:0 0 0 4px rgba(255,255,255,1);overflow:k_ahidden;-webkit-transition:background .3s,color .3s,box-shadow .3s;-moz-transition:background .3s,color .3s,box-shadow .3s;transition:background .3s,color .3s,box-shadow .3s}.k_ahi-effect-5 .k_ahi:after{display:none}.k_ahi-effect-5 .k_ahi:hover{background:rgba(255,255,255,1);color:#702fa8;box-shadow:0 0 0 8px rgba(255,255,255,.3)}.k_ahi-effect-5a .k_ahi:hover:before{-webkit-animation:toRightFromLeft .3s forwards;-moz-animation:toRightFromLeft .3s forwards;animation:toRightFromLeft .3s forwards}.k_ahi-effect-5a .k_ahi:hover .k_ahi-material-icons{color:#F44336}@-webkit-keyframes toRightFromLeft{0%{-webkit-transform:translate(100%)}50%{opacity:0;-webkit-transform:translate(-100%)}100%{opacity:1}}@-moz-keyframes toRightFromLeft{0%{-moz-transform:translate(100%)}50%{opacity:0;-moz-transform:translate(-100%)}100%{opacity:1}}@keyframes toRightFromLeft{0%{transform:translate(100%)}50%{opacity:0;transform:translate(-100%)}100%{opacity:1}}.k_ahi-effect-6 .k_ahi{box-shadow:0 0 0 4px rgba(255,255,255,1);transition:background .2s,color .2s}.k_ahi-effect-6 .k_ahi:hover{background:rgba(255,255,255,1);color:#64bb5d}.k_ahi-effect-6 .k_ahi:hover .k_ahi-material-icons{color:#F44336}.k_ahi-effect-6 .k_ahi:hover:before{-webkit-animation:k_ahi-spinaround 2s linear infinite;-moz-animation:k_ahi-spinaround 2s linear infinite;animation:k_ahi-spinaround 2s linear infinite}.k_ahi-effect-7 .k_ahi{box-shadow:0 0 0 4px rgba(255,255,255,1);-webkit-transition:background .2s,color .2s;-moz-transition:background .2s,color .2s;transition:background .2s,color .2s}.k_ahi-effect-7 .k_ahi:hover{color:#fff}.k_ahi-effect-7 .k_ahi:after{top:-8px;left:-8px;padding:8px;z-index:-1;opacity:0}.k_ahi-effect-7a .k_ahi:after{box-shadow:0 0 0 rgba(255,255,255,1);-webkit-transition:opacity .2s,box-shadow .2s;-moz-transition:opacity .2s,box-shadow .2s;transition:opacity .2s,box-shadow .2s}.k_ahi-effect-7a .k_ahi:hover:after{opacity:1;box-shadow:3px 3px 0 rgba(255,255,255,1)}.k_ahi-effect-7a .k_ahi:before{-webkit-transform:scale(.8);-moz-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);opacity:.7;-webkit-transition:-webkit-transform .2s,opacity .2s;-moz-transition:-moz-transform .2s,opacity .2s;transition:transform .2s,opacity .2s}.k_ahi-effect-7a .k_ahi:hover:before{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}.k_ahi-effect-7b .k_ahi:after{box-shadow:3px 3px rgba(255,255,255,1);-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transition:opacity .2s,-webkit-transform .2s;-moz-transition:opacity .2s,-moz-transform .2s;transition:opacity .2s,transform .2s}.k_ahi-effect-7b .k_ahi:hover:after{opacity:1;-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}.k_ahi-effect-7b .k_ahi:before{-webkit-transform:scale(.8);-moz-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);opacity:.7;-webkit-transition:-webkit-transform .2s,opacity .2s;-moz-transition:-moz-transform .2s,opacity .2s;transition:transform .2s,opacity .2s}.k_ahi-effect-7b .k_ahi:hover:before{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}.k_ahi-effect-7c .k_ahi:after{box-shadow:0 0 0 rgba(255,255,255,1);-webkit-transition:opacity .2s,box-shadow .2s;-moz-transition:opacity .2s,box-shadow .2s;transition:opacity .2s,box-shadow .2s}.k_ahi-effect-7c .k_ahi:hover:after{opacity:1;box-shadow:-3px -3px 0 rgba(255,255,255,1)}.k_ahi-effect-7c .k_ahi:before{-webkit-transform:scale(.8);-moz-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);opacity:.7;-webkit-transition:-webkit-transform .2s,opacity .2s;-moz-transition:-moz-transform .2s,opacity .2s;transition:transform .2s,opacity .2s}.k_ahi-effect-7c .k_ahi:hover:before{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}.k_ahi-effect-7d .k_ahi:after{box-shadow:0 0 0 rgba(255,255,255,1);-webkit-transition:opacity .2s,box-shadow .2s;-moz-transition:opacity .2s,box-shadow .2s;transition:opacity .2s,box-shadow .2s}.k_ahi-effect-7d .k_ahi:hover:after{opacity:1;box-shadow:-3px 3px 0 rgba(255,255,255,1)}.k_ahi-effect-7d .k_ahi:before{-webkit-transform:scale(.8);-moz-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);opacity:.7;-webkit-transition:-webkit-transform .2s,opacity .2s;-moz-transition:-moz-transform .2s,opacity .2s;transition:transform .2s,opacity .2s}.k_ahi-effect-7d .k_ahi:hover:before{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}.k_ahi-effect-7e .k_ahi:after{box-shadow:0 0 0 rgba(255,255,255,1);-webkit-transition:opacity .2s,box-shadow .2s;-moz-transition:opacity .2s,box-shadow .2s;transition:opacity .2s,box-shadow .2s}.k_ahi-effect-7e .k_ahi:hover:after{opacity:1;box-shadow:3px -3px 0 rgba(255,255,255,1)}.k_ahi-effect-7e .k_ahi:before{-webkit-transform:scale(.8);-moz-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);opacity:.7;-webkit-transition:-webkit-transform .2s,opacity .2s;-moz-transition:-moz-transform .2s,opacity .2s;transition:transform .2s,opacity .2s}.k_ahi-effect-7e .k_ahi:hover:before{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}.k_ahi-effect-7g .k_ahi:after{box-shadow:3px 3px rgba(255,255,255,1);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);-webkit-transition:opacity .2s,-webkit-transform .2s;-moz-transition:opacity .2s,-moz-transform .2s;transition:opacity .2s,transform .2s}.k_ahi-effect-7g .k_ahi:hover:after{opacity:1;-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}.k_ahi-effect-7g .k_ahi:before{-webkit-transform:scale(.8);-moz-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);opacity:.7;-webkit-transition:-webkit-transform .2s,opacity .2s;-moz-transition:-moz-transform .2s,opacity .2s;transition:transform .2s,opacity .2s}.k_ahi-effect-7g .k_ahi:hover:before{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}.k_ahi-effect-7h .k_ahi:after{box-shadow:3px 3px rgba(255,255,255,1);-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);-webkit-transition:opacity .2s,-webkit-transform .2s;-moz-transition:opacity .2s,-moz-transform .2s;transition:opacity .2s,transform .2s}.k_ahi-effect-7h .k_ahi:hover:after{opacity:1;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.k_ahi-effect-7h .k_ahi:before{-webkit-transform:scale(.8);-moz-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);opacity:.7;-webkit-transition:-webkit-transform .2s,opacity .2s;-moz-transition:-moz-transform .2s,opacity .2s;transition:transform .2s,opacity .2s}.k_ahi-effect-7h .k_ahi:hover:before{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}.k_ahi-effect-7i .k_ahi:after{box-shadow:3px 3px rgba(255,255,255,1);-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);-webkit-transition:opacity .2s,-webkit-transform .2s;-moz-transition:opacity .2s,-moz-transform .2s;transition:opacity .2s,transform .2s}.k_ahi-effect-7i .k_ahi:hover:after{opacity:1;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.k_ahi-effect-7i .k_ahi:before{-webkit-transform:scale(.8);-moz-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);opacity:.7;-webkit-transition:-webkit-transform .2s,opacity .2s;-moz-transition:-moz-transform .2s,opacity .2s;transition:transform .2s,opacity .2s}.k_ahi-effect-7i .k_ahi:hover:before{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}.k_ahi-effect-7j .k_ahi:after{box-shadow:3px 3px rgba(255,255,255,1);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);-webkit-transition:opacity .2s,-webkit-transform .2s;-moz-transition:opacity .2s,-moz-transform .2s;transition:opacity .2s,transform .2s}.k_ahi-effect-7j .k_ahi:hover:after{opacity:1;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.k_ahi-effect-7j .k_ahi:before{-webkit-transform:scale(.8);-moz-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);opacity:.7;-webkit-transition:-webkit-transform .2s,opacity .2s;-moz-transition:-moz-transform .2s,opacity .2s;transition:transform .2s,opacity .2s}.k_ahi-effect-7j .k_ahi:hover:before{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}.k_ahi-effect-8 .k_ahi{background:rgba(255,255,255,.1);-webkit-transition:-webkit-transform ease-out .1s,background .2s;-moz-transition:-moz-transform ease-out .1s,background .2s;transition:transform ease-out .1s,background .2s}.k_ahi-effect-8 .k_ahi:after{top:0;left:0;padding:0;z-index:-1;box-shadow:0 0 0 2px rgba(255,255,255,.1);opacity:0;-webkit-transform:scale(.9);-moz-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9)}.k_ahi-effect-8 .k_ahi:hover{background:rgba(255,255,255,.05);-webkit-transform:scale(.93);-moz-transform:scale(.93);-ms-transform:scale(.93);transform:scale(.93);color:#fff}.k_ahi-effect-8 .k_ahi:hover:after{-webkit-animation:k_ahi-sonar 1.3s ease-out 75ms;-moz-animation:k_ahi-sonar 1.3s ease-out 75ms;animation:k_ahi-sonar 1.3s ease-out 75ms}@-webkit-keyframes k_ahi-sonar{0%{opacity:.3}40%{opacity:.5;box-shadow:0 0 0 2px rgba(255,255,255,.1),0 0 10px 10px #fff,0 0 0 10px rgba(255,255,255,.5)}100%{box-shadow:0 0 0 2px rgba(255,255,255,.1),0 0 10px 10px #fff,0 0 0 10px rgba(255,255,255,.5);-webkit-transform:scale(1.5);opacity:0}}@-moz-keyframes k_ahi-sonar{0%{opacity:.3}40%{opacity:.5;box-shadow:0 0 0 2px rgba(255,255,255,.1),0 0 10px 10px #fff,0 0 0 10px rgba(255,255,255,.5)}100%{box-shadow:0 0 0 2px rgba(255,255,255,.1),0 0 10px 10px #fff,0 0 0 10px rgba(255,255,255,.5);-moz-transform:scale(1.5);opacity:0}}@keyframes k_ahi-sonar{0%{opacity:.3}40%{opacity:.5;box-shadow:0 0 0 2px rgba(255,255,255,.1),0 0 10px 10px #fff,0 0 0 10px rgba(255,255,255,.5)}100%{box-shadow:0 0 0 2px rgba(255,255,255,.1),0 0 10px 10px #fff,0 0 0 10px rgba(255,255,255,.5);transform:scale(1.5);opacity:0}}.k_ahi-effect-9 .k_ahi{-webkit-transition:box-shadow .2s;-moz-transition:box-shadow .2s;transition:box-shadow .2s}.k_ahi-effect-9 .k_ahi:after{top:0;left:0;padding:0;box-shadow:0 0 0 3px #fff;-webkit-transition:-webkit-transform .2s,opacity .2s;-moz-transition:-moz-transform .2s,opacity .2s;transition:transform .2s,opacity .2s}.k_ahi-effect-9a .k_ahi:hover:after{transform:scale(.85);opacity:.5}.k_ahi-effect-9a .k_ahi:hover{box-shadow:0 0 0 10px rgba(255,255,255,1);color:#fff}.k_ahi-effect-9b .k_ahi:hover:after{-webkit-transform:scale(.85);-moz-transform:scale(.85);-ms-transform:scale(.85);transform:scale(.85)}.k_ahi-effect-9b .k_ahi:hover{box-shadow:0 0 0 10px rgba(255,255,255,.4);color:#fff}
Explain