ویژه [xf-xyz]استایل دهی به دکمه های انجمن (انواع مختلف)

[XF Father]

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

1. شکل و ظاهر
2. استایل ها و الگوها
3. الگوها

سپس الگوی extra.less را پیدا کنید وکد زیر را درون آن بگذارید.

[HIDESHOWTOGROUPS=4,3,6,5,7]

.button, a.button{
color:#0A3F63;
line-height: 1.4;
font-weight: 700;
font-size: 12px;

padding-left:8px;
padding-right:8px;
padding-top:6px;
padding-bottom:6px;
background-color:#FFFFFF;
border:1px solid #ccc;
border-top-left-radius:17px;
border-top-right-radius:0;
border-bottom-right-radius:17px;
border-bottom-left-radius:0;
box-shadow:0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 4px rgba(0, 0, 0, 0.3);
}

[/HIDESHOWTOGROUPS]


*** تمامی دکمه ها تغییر می کنند ، من فقط 2 نمونه شو اینجا میذارم.


قبل:


و

---

بعد :

و

 

[nima]

۲-گرد گردن دکمه ها به میزان دلخواه
برای اینکار به بخش ویژگی های استایل برید و وارد دکمه ها بشید. در بخش Button base در بخش موارد اضافی کد زیر رو وارد کنید.
[HIDESHOWTOGROUPS=12,4,13,3,10,6,5,7,15]

border-radius: 35%;

مقدارش رو برحسب درصد تعیین کنید. هرچه بزرگتر بزنید دکمه ها گرد تر میشوند.
[/HIDESHOWTOGROUPS]

 

[nima]

۳-کج کردن دکمه ها!!!!!
[HIDESHOWTOGROUPS=12,13,3,10,6,5,7]

margin: 3px 0 0 30px;
   -webkit-transform: rotate(-3deg);
   -moz-transform: rotate(-3deg);
   -ms-transform: rotate(-3deg);
   -o-transform: rotate(-3deg);
   transform: rotate(-3deg);
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;

کد بالا رو طبق اموزش گرد کردن قرار بدید
[/HIDESHOWTOGROUPS]

 

[nima]

۴- انیمیشن دار کردن
[HIDESHOWTOGROUPS=12,4,13,3,10,6,7]

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

کد بالا رو درextra.lessقراربدید و بعد درbutton base کد زیر رو.
[/HIDESHOWTOGROUPS]
[HIDESHOWTOGROUPS=12,4,13,3,10,6,7]

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

کد بالا رو درextra.lessقراربدید و بعد درbutton base کد زیر رو.

animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;

[/HIDESHOWTOGROUPS]

 

[nima]

5-برجسته کردن
طبق آموزش گرد کردن کد زیر را قرار دهید.
[HIDESHOWTOGROUPS=12,4,13,3,10,11,6,5,7]
border: outset;
[/HIDESHOWTOGROUPS]

 

[مجیدی]

خوب سلام خدمت دوستان ارجمند

@King
@محمد
من بلد نیستم کد رو ویژه کنم خودتون زحمتش رو بکشین

اختصاصی انجمن خودمه تازه طراحیش کردم
این حالت دکمه ای انمیشن دار هستش مثل قبلی که
@nima جان قرار داد اما این متفاوت تره

خوب بریم سروقت اموزش
کد های پایین رو تو الگو extra.less اضافه کنید

.button, a.button {font-weight:bold;background-image: linear-gradient(210deg, #8F343A, #26A65B, #1C86EE, #FFBE1C, #176093, #7AF26D, #8E44AD, #CC6600, #CF4D35, #E0EEEE)!important; background-size: 1400% 1400%!important; -webkit-animation: trgamers 15s ease infinite!important; -moz-animation: trgamers 15s ease infinite!important; -o-animation: trgamers 15s ease infinite!important; animation: trgamers 15s ease infinite!important;}
@-webkit-keyframes trgamers {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}
@-moz-keyframes trgamers {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}
@-o-keyframes trgamers {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}
@keyframes trgamers {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}

و حالا که تموم شد ثبت می کنید

لذت ببرین