محتوانوشته
آموزش ساخت دکمه
آموزش ساخت دکمه با کد css و html
سلام به دنیای وردپرس 🙂
امروز در این آموزش قصد داریم در اختیار شما کد هایی قرار بدهیم که با استفاده از آن می توانید دکمه های زیبا و فلت برای سایتتون طراحی کنید.
دکمه بخش مهمی از طراحی یک قالب است و طراحان قالب سعی می کنند دکمه های زیبا بسازند و آن را در سایت به نمایش بگذارند تا قالب سایت هم زیبا تر به نظر برسه خب این هم یه روشه
دکمه ای که می خواهیم امروز نحوه ی ساختن اون رو توضیح بدیم دکمه ی زیر است.
در قدم اول کد css زیرا کپی نمایید
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | .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 قرار دهید.
ببخشید من انجام میدم هیچ تغییری نمیکنه
فقط یک متن خالی نمایش میده و یا همون کدارو نشون میده
سلام و احترام
تداخلی با قالب شما وجود دارد و باید بررسی شود.
با تشکر
مرسی واقعا دس خوش