ساخت دکمه های زیبا و فلت با کد های css و html

آموزش ساخت دکمه

آموزش ساخت دکمه با کد css و html

سلام به دنیای وردپرس 🙂

ساخت دکمه

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

دکمه بخش مهمی از طراحی یک قالب است و طراحان قالب سعی می کنند دکمه های زیبا بسازند و آن را در سایت به نمایش بگذارند تا قالب سایت هم زیبا تر به نظر برسه خب این هم یه روشه

دکمه ای که می خواهیم امروز نحوه ی ساختن اون رو توضیح بدیم دکمه ی زیر است.

ساخت دکمه

در قدم اول کد css زیرا کپی نمایید

.button {
    overflow: hidden;

    position: relative;
	-moz-box-shadow: 0px 8px 19px -6px #ff170f;
	-webkit-box-shadow: 0px 8px 19px -6px #ff170f;
	box-shadow: 0px 8px 19px -6px #ff170f;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f74134), color-stop(1, #f74134));
	background:-moz-linear-gradient(top, #f74134 5%, #f74134 100%);
	background:-webkit-linear-gradient(top, #f74134 5%, #f74134 100%);
	background:-o-linear-gradient(top, #f74134 5%, #f74134 100%);
	background:-ms-linear-gradient(top, #f74134 5%, #f74134 100%);
	background:linear-gradient(to bottom, #f74134 5%, #f74134 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f74134', endColorstr='#f74134',GradientType=0);
	background-color:#f74134;
	-moz-border-radius:29px;
	-webkit-border-radius:29px;
	border-radius:29px;
	display:inline-block;
	cursor:pointer;
	padding:17px 38px;
	text-decoration:none;
	text-shadow:0px 0px 0px #632c0e;
}
.button:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f74134), color-stop(1, #f74134));
	background:-moz-linear-gradient(top, #f74134 5%, #f74134 100%);
	background:-webkit-linear-gradient(top, #f74134 5%, #f74134 100%);
	background:-o-linear-gradient(top, #f74134 5%, #f74134 100%);
	background:-ms-linear-gradient(top, #f74134 5%, #f74134 100%);
	background:linear-gradient(to bottom, #f74134 5%, #f74134 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f74134', endColorstr='#f74134',GradientType=0);
	background-color:#f74134;
}
.button:active {
	position:relative;
	top:1px;
}
.button:before {
    background-position: 73%;
    background-size: 600px;
    background-image: url(https://wpnovin.com/img/icon-background12.png);
    position: absolute;
    top: 0;
    left: 0;
    height: 7000%;
    width: 100%;
    display: block;
    z-index: 0;
    content: "";
    opacity: .05;
    pointer-events: none;
}

خب هنگامی که این کد رو از سایت ما کپی کردید آن را در جای مناسبی قرار دهید و یا اگر هم ساختار قالب سایت شما HTML است

کد را این گونه قرار دهید <style/>کد<style> تا کد html این دکمه بتواند به راحتی از کد css را بازخوانی کند.

اگر ساختار ویرایش قالب سایت شما css بود کد css بالا را کپی کنید و بودن هیچ کد اضافی آن را قرار دهید.

هنگامی که کد css را در جای مناسبی قرار دادید این کد html زیر را در جایی قرار دهید که می خواهید دکمه ی شما نمایش داده شود.

<p><strong><span style=”font-family: ‘vazir’; font-size: 17px; color: #ffffff;”><a href=”#” class=”button”><span style=”color: #ffffff;”>متن تست</span></a></span></strong></p>

رنگ های دیگر این دکمه را در فایلی اختصاصی برای شما کاربران عزیز آماه کرده ایم

دانلود فایل

اگر می خواهید با یک افزونه ی وردپرس حرفه ای دکمه بسازید اینجا کلیک کنید.

راستی ! با عضویت در کانال تلگرام نوین وردپرس حتی یک مطلب وردپرس را هم از دست نخواهید داد...             عضویت در کانال

یک پیشنهاد برای شما:

آموزش غیرفعال کردن خطاهای php در وردپرس

آموزش غیرفعال کردن خطاهای php در وردپرس

اگر سایت وردپرس دارید حتما تاکنون با خطاهای warning برخورد داشته اید و بارها بفکر این افتاده اید که باید چه اقدامی انجام داد تا این خطاهای php دیگر روی سایت شما نمایش داده نشود. از…

ارسال دیدگاه

آدرس ایمیل شما منتشر نخواهد شد. فیلد های ضروری با * مشخص شده است.

کد امنیتی زیر را وارد کنید: *

کد امنیتی زیر را وارد کنید: *