ساخت دکمه های زیبا و فلت با کد های 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>

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

دانلود فایل

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