آموزش ساخت دکمه با css3 ، خوب زمانی که یه قسمت از سایتتون یکم سخته واسه کاربران باید یه راهنمایی واسش قرار بدین حالا اگه بخواین خیلی زیبا و شیک این کارو انجام بدین من پیشنهاد می کنم که با ما همراه باشید تا با هم یه دکمه ی خیلی زیبا واسه راهنمایی کاربرانتون درست کنیم به طوری که وقتی رویه این دکمه میره موس یه جعبه ی خیلی شیک با یه افکت زیبا ظاهر میشه خوب پس با ما همراه باشید.
اولین گام کد های HTML
خوب اولین کاری که باید انجام بدید باید یه پاراگراف ساده با یه کلاس به نام help-tip در یه div قرار بدید.
<div class="help-tip"> <p>text test for help and test my animation and effect</p> </div>
خوب این پاراگراف به صورت عادی مخفی هست و هر زمان که موس روی دکمه میاد با کمی انیمیشن زیبا و افکت ظاهر میشه.
دومین گام کد های CSS3
کد های استایل رو می تونید در فایل CSS جداگانه ای قرار بدید و به صفحه ای که دکمه در اون قرار داره لینک کنید یا هم تو همون صفحه با تگ STYLE کد ها رو بزارید.
این هم از کد های CSS3
.help-tip{ position: absolute; top: 18px; right: 18px; text-align: center; background-color: #BCDBEA; border-radius: 50%; width: 24px; height: 24px; font-size: 14px; line-height: 26px; cursor: default; } .help-tip:before{ content:'?'; font-weight: bold; color:#fff; } .help-tip:hover p{ display:block; transform-origin: 100% 0%; -webkit-animation: fadeIn 0.3s ease-in-out; animation: fadeIn 0.3s ease-in-out; } .help-tip p{ /* The tooltip */ display: none; text-align: left; background-color: #1E2021; padding: 20px; width: 300px; position: absolute; border-radius: 3px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); right: -4px; color: #FFF; font-size: 13px; line-height: 1.4; } .help-tip p:before{ /* The pointer of the tooltip */ position: absolute; content: ''; width:0; height: 0; border:6px solid transparent; border-bottom-color:#1E2021; right:10px; top:-12px; } .help-tip p:after{ /* Prevents the tooltip from being hidden */ width:100%; height:40px; content:''; position: absolute; top:-40px; left:0; } /* CSS animation */ @-webkit-keyframes fadeIn { ۰% { opacity:0; transform: scale(0.6); } ۱۰۰% { opacity:100%; transform: scale(1); } } @keyframes fadeIn { ۰% { opacity:0; } ۱۰۰% { opacity:100%; } }
در ضمن واسه اینکه مرورگر کروم پشتیبانی کنه از کد ها باید کلمه webkit در اول کد های CSS3 گذاشته بشه که ما واستون گذاشتیم اگه دیدید واسه مرورگر های دیگه مثل موزیلا کار نمی کنه کلمه moz ، و برای اوپرا o و برای اینترنت ایکسپلورر ms رو داخل دو خط تیره مثل همون webkit که در خط ۲۳ هست قرار بدید اگه هم مشکلی داشتین حتما بگین که مشکلتون رو برطرف کنم درضمین این اجزا رو واسه هر قسمتی دیگه می تونید استفاده کنید.
در آخر هم یه پیشنمایش از این کد ها به صورت عکس:
سلام خدمت شما، در خدمتتون هستم
سلام خدمت شما، در خدمتتون هستم
ثبت نظر جدید لغو پاسخ
لیست نظرات
-
چگونه از غول های فارسی بک لینک رایگان بگیریم ؟!!!
15 فروردين 140418 1,290 0 -
افزونه پنل کاربری حرفه ای و بهترین افزونه ثبت نام وردپرس MemberShip Pro درگاه زرین پال
12 شهريور 139915 5,321 5 -
افزایش سرعت بارگذاری – بهترین افزونه های کش وردپرس
20 آذر 139314 307 0 -
دانلود افزونه Gravity Forms : ساخت انواع فرم های وردپرس
27 آذر 139313 398 0 -
ارسال خودکار مطالب وردپرس به تلگرام، اینستاگرام و سایر شبکههای اجتماعی
1 ارديبهشت 14049 3,520 0 -
آموزش قرار دادن سه نقطه برای متن های بسیار طولانی در وب سایت
8 تير 13969 1,778 3 -
معرفی 7 افزونه ساخت سایت مشاور املاک وردپرس
21 ارديبهشت 14049 2,961 4.8 -
آموزش افزونه حتما بخوانید وردپرس
25 بهمن 13958 387 5
-
ایجاد فاکتور برای محصولات ووکامرس + مقایسه + آموزش
29 ارديبهشت 14042 486 5 -
افزونه نمودار حرفه ای تغییر قیمت در ووکامرس + مقایسه + آموزش نصب و راه اندازی
28 ارديبهشت 14042 459 0 -
مشکل قالب های نال شده وردپرس – ۱۳ دلیل برای نادیده گرفتن قالب ها و افزونه های نال وردپرس
28 ارديبهشت 14040 417 0 -
امتیاز دهی به نظرات وردپرس با افزونهها (بررسی کامل + لینک دانلود)
27 ارديبهشت 14042 364 0 -
راهنمای جامع فروش اشتراک با ووکامرس
27 ارديبهشت 14040 14 0 -
نشانهگذاری اسکیما چیست و چه تاثیری در نتایج جستجو دارد؟
25 ارديبهشت 14040 32 4 -
چگونه بدون از دست دادن اطلاعات، نسخه ووکامرس را به نسخه قبلی برگردانیم؟
25 ارديبهشت 14040 37 0 -
۸ تا از بهترین افزونههای لیست علاقهمندی ووکامرس برای فروشگاههای وردپرسی
24 ارديبهشت 14040 28 0
تبلیغات متنی
به این مطالب نیز شاید علاقه مند باشید ...
مطالب مشابه
ایجاد فاکتور برای محصولات ووکامرس + مقایسه + آموزش
معرفی بهترین افزونههای رایگان صدور فاکتور ووکامرس (۲۰۲۵) اگر صاحب یک فروشگاه اینترنتی با ووکامرس هستید، بدون شک صدور فاکتور برای سفارشها یکی از ضروریترین نیازهای شماست. بسیاری از کاربران به دنبال یک افزونه صدور فاکتور ووکامرس رایگان هستند که بدون پیچیدگی و در عین حال حرفهای نیازهای فاکتوردهی را پوشش دهد. در این مقاله […]
افزونه نمودار حرفه ای تغییر قیمت در ووکامرس + مقایسه + آموزش نصب و راه اندازی
بهترین افزونههای رایگان برای نمایش نمودار تغییر قیمت محصولات در ووکامرس اگر میخواهید تجربه کاربری فروشگاه اینترنتی خود را حرفهایتر کنید، افزودن نمودار تغییر قیمت محصولات در ووکامرس یکی از بهترین راهکارهاست. این ویژگی به خریداران کمک میکند روند کاهش یا افزایش قیمت محصول را مشاهده کرده و با اطمینان بیشتری خرید کنند. در ادامه […]
مشکل قالب های نال شده وردپرس – ۱۳ دلیل برای نادیده گرفتن قالب ها و افزونه های نال وردپرس
در این مقاله قصد داریم نگاهی دقیقتر به قالب نال شده وردپرس و افزونههای نال بیندازیم و بررسی کنیم که چرا بسیاری از کارشناسان وردپرس بر استفاده نکردن از قالبها و افزونههای Null شده تأکید دارند. همچنین با مرور مشکل قالبهای نال شده وردپرس، به این پرسش مهم پاسخ میدهیم: چرا نباید از قالب و […]
امتیاز دهی به نظرات وردپرس با افزونهها (بررسی کامل + لینک دانلود)
بخش دیدگاهها در وردپرس یکی از مهمترین ابزارهای تعامل بین کاربران و مدیران سایت است. هر چه این بخش فعالتر، حرفهایتر و تعاملیتر باشد، تأثیر مستقیمی بر رشد جامعه کاربران سایت، سئو و اعتبار مطالب خواهد داشت. یکی از بهترین روشها برای بهبود این بخش، افزودن قابلیت امتیاز دهی و لایک نظرات وردپرس است. در […]
سلام صالح جان
چشم
ببخشید اگر ناراحت شدی!
راستی چی شد بود سایتت یه هفته دان شده بود؟؟!!
اگر مشکل سرور داری بیا رو سرور خودمون
سلام محمد امین خان
خواهش، سایت پرن دیزاین به دلایلی به سایت پروان وب کلا دامنه و نام سایت تغییر کرد. نه ممنون باشه اگه قسمت شد یه سایتی الان در حال طراحیه یه سایت قرض الحسنه اگه بشه میدم رو سرور شما.