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

ضعیفمتوسطخوببسیار خوبعالی
( 0 رای , میانگین : 0,00 از 5)
بارگذاری...

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

آموزش ساخت دکمه با کد 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>

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

دانلود فایل

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

درباره نویسنده



سپهر کرمی
( عضو از 6 سال قبل )
  • 32 نوشته
  • 3 دیدگاه
  • 0 محصول
  • 0 دوره آموزشی
یک فنجان چای کنار وردپرس می چسبه سپهر کرمی هستم عضو تیم نوین وردپرس

نظرات کاربران

ثبت دیدگاه

  1. سلام این کدهارو باید کجا قرار بدم

    .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;
    }

چند نکته قبل از ارسال دیدگاه :
  • تمامی دیدگاه ها قبل از انتشار عمومی توسط کارشناسان سایت بررسی خواهند شد.
  • دیدگاه هایی که جنبه تبلیغاتی داشته باشند تایید نخواهند شد.
  • آدرس سایت ، مشخصات مدیریت و... در متن دیدگاه حذف خواهند شد.
  • دیدگاه هایی که به زبان انگلیسی باشند تایید نخواهند شد.
  • دیدگاه هایی که حاوی توهین ، تهدید یا... باشند تایید نخواهند شد.

دیدگاهتان را بنویسید

مطالب مرتبط



افزونه انتقال ابزارک ها در وردپرس

2570
0
در برخی از مواقع ممکن است لازم باشد تا اطلاعات یک وب سایت را به یک سایت منتقل کنیم. شاید در نگاه اول فکر کنید که اینکار بسیار ...
جزییات بیشتر آموزش را بخوانید!

آموزش ایجاد Web Push Notifications در وردپرس با افزونه OneSignal

4329
19
سلام خدمت شما عزیران نوین وردپرسی ها امروز با افزونه ی جالب در خدمت شما هستیم که با توجه به اینکه خیلی از انتشار آن نگذشته اما سر وصدای ...
جزییات بیشتر آموزش را بخوانید!

آموزش نمایش لیستی از برگه های فرزند برای برگه والد در وردپرس

1304
0
وقتیکه روی سایتی کار می کنید که برگه های والدی با چندین برگه فرزند دارد، شاید بخواهید برگه های فرزند مربوط به هر کدام از برگه های والد ...
جزییات بیشتر آموزش را بخوانید!

۱۰ صفحه ای که هر سایت ودرپرسی باید داشته باشد

1748
0
وقتی سایتی را راه اندازی میکنیم همیشه یک سوال بزرگ در جلوی ماست. لیست برگه های مهم وردپرس چیست تا سایتمان بهتر دیده شود؟ الویت با کدام برگه ها ...
جزییات بیشتر آموزش را بخوانید!

بهترین افزونه های آمارگیر وردپرس | 11 افزونه برتر آمار بازدید و آنالیز ترافیک سایت

4301
0
آنالیز ترافیک سایت در وردپرس یکی از مهم ترین استراتژی هایی است که می تواند به بهبود سئوی سایت شما کمک کند. آیا می دانید روزانه، هفتگی یا ...
جزییات بیشتر آموزش را بخوانید!

بازاریابی محتوا در وب سایت چه مزایایی به همراه دارد ؟

2478
0
با سلام در این بخش از مقالات آموزشی وردپرس قصد داریم در مورد بازاریابی محتوا صحبت کنیم . بازاریابی محتوا عبارتی آشنا برای صاحبان کسب و کار اینترنتی است ...
جزییات بیشتر آموزش را بخوانید!

آموزش نحوه رفع خطا 429 یا too many requests وردپرس

5015
0
آیا در سایتتان با خطای 429 مواجه هستید؟ این خطا معمولاً به عنوان خطای درخواست های بیش از حد شناخته می شود و یکی از خطاهای رایج وردپرس ...
جزییات بیشتر آموزش را بخوانید!

تصویر شاخص در وردپرس چیست | معرفی افزونه های تصویر شاخص

1596
0
استفاده از عناصر بصری در سایت وردپرسی یک راه عالی برای جلب توجه بازدیدکنندگان بشمار می رود. هنگامی که با یک مقاله جامع همراه شود، یک عنصر بصری ...
جزییات بیشتر آموزش را بخوانید!

دسته بندی مطالب

محصولات حرفه ای

جستجو کنید…

همکار ما شوید

اگر دوست دارید در زمینه آموزش ، افزونه ، قالب وردپرس و ووکامرس ، آموزش سئو و… مقالات آموزشی خود را در نوین وردپرس منتشر کنید میتوانید به عنوان نویسنده در نوین وردپرس فعالیت کنید.

  • تولید کننده فیلم آموزشی کار با محصولات
  • نویسندگی و ارسال مطالب آموزشی
  • تولید کننده دورهای آموزشی برنامه نویسی
  • فارسی سازی و ترجمه انواع قالب
  • و هر آنچه که توانایی دارید...
  • فهرست مطالب