ساخت دکمه های زیبا و فلت با کد های 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>
رنگ های دیگر این دکمه را در فایلی اختصاصی برای شما کاربران عزیز آماه کرده ایم
اگر می خواهید با یک افزونه ی وردپرس حرفه ای دکمه بسازید اینجا کلیک کنید.
- تمامی دیدگاه ها قبل از انتشار عمومی توسط کارشناسان سایت بررسی خواهند شد.
- دیدگاه هایی که جنبه تبلیغاتی داشته باشند تایید نخواهند شد.
- آدرس سایت ، مشخصات مدیریت و... در متن دیدگاه حذف خواهند شد.
- دیدگاه هایی که به زبان انگلیسی باشند تایید نخواهند شد.
- دیدگاه هایی که حاوی توهین ، تهدید یا... باشند تایید نخواهند شد.
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.
سلام این کدهارو باید کجا قرار بدم
.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;
}
سلام و درود
در قسمت نمایش / سفارشی سازی / کدهای css قرار دهید.
ببخشید من انجام میدم هیچ تغییری نمیکنه
فقط یک متن خالی نمایش میده و یا همون کدارو نشون میده
سلام و احترام
تداخلی با قالب شما وجود دارد و باید بررسی شود.
با تشکر
مرسی واقعا دس خوش