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

شبح دکمه در وردپرس

شبح دکمه

شبح دکمه چیست؟

شبح دکمه  اصطلاحات طراحی وب مورد استفاده برای دکمه های شفاف که به پس زمینه خود را ترکیب و قابل توجه توسط مرز در اطراف آنها است.

ایجاد تماس های عادی به دکمه های عمل در وردپرس کاملا آسان است. شما حتی می توانید آنها را در پست ها و صفحات خود  بدون نوشتن CSS یا HTML اضافه کنید.
اضافه کردن دکمه های شبح در وردپرس

 

 اضافه کردن دکمه های شبح در وردپرس

اضافه کردن دکمه های شبح

همانطور که قبلا ذکر شد، شما نیاز به استفاده از یک کمی از CSS و HTML برای اضافه کردن دکمه شبح در تم وردپرس خود دارید

شما خواهید یک سرویس گیرنده FTP برای اتصال به وب سرور شما نیاز دارند. پس از اتصال، به / فایل wp-content / themes در / شما تم / پوشه بروید و در مکانی فایل را ببندید. این فایل را ویرایش کنید در یک ویرایشگر متن و سپس کد زیر را به آن اضافه کنید

[php]

.ghost-button { display: inline-block; width: 200px; padding: 8px; color: #fff; border: 2px solid #fff; text-align: center; outline: none; text-decoration: none; transition: background-color 0.2s ease-out, color 0.2s ease-out; } .ghost-button:hover, .ghost-button:active { background-color: #fff; color: #000; transition: background-color 0.3s ease-in, color 0.3s ease-in; }
[/php]

تغییرات را ذخیره کنید و فایل را به سرور آپلود کنید.
حالا هر زمان که شما می خواهید برای نمایش دکمه شما باید کلاس = “شبح دکمه” را اضافه کنید.

محل کد HTML برای لینک دانلود را تعیین کنید و  کلاس CSS مثل این را اضافه کنید:
<a href=”http://example.com/downloads/” class=”ghost-button”> دانلود در حال حاضر </a> را
حالا دخیره سازی را انجام دهید اکنون شما یک دکمه شبه زیبا به جای لینک ساده و قدیمی را ببینید.

امیدواریم این مقاله به شما در نحوه اضافه کردن دکمه های CSS در تم وردپرس کمک کرده باشد.برای مشاهده مقالات بیشتر درباره ی طراحی قالب وردپرس به https://www.on5.ir مراجعه نمایید.

آنفایو مرجع مقالات تخصصی طراحی قالب وردپرس

 

نظر خود را بگذارید

-- بارگیری کد امنیتی --