Common Button

در سیستم طراحی سپانو دیتا انواع Buttonها عبارتند از :

Filled Button, Outlined Button, Text Button

مشخصات کلی

تمامی Common Buttonها برای دو حالت تاریک و روشن صفحه طراحی شده اند.

استفاده از هر نوع از Common Button‌ها بنا به اهمیت آن‌ها است.

منابع

فایل فیگما سیستم طراحی سپانو دسترسی کامل به تمامی کامپوننت‌ها و شیوه‌نامه‌های سیستم طراحی سپانوwest

فایل لوگو سپانو دیتا دریافت لوگو رسمی و سازمانی سپانو دیتاwest

Filled Button

رنگ

Hex	Color Role	Element
#3ECF8A	Primary	1.Container
#0B1C28	On primary	2.Label Text

Hex	Color Role	Element
#BCFFDF	Primary	1.Container
#0B1C28	On primary	2.Label Text

حالت‌ها

چیدمان

Outlined Button

رنگ

Hex	Color Role	Element
#3ECF8A	Primary	1.Container
#0B1C28	On primary	2.Label Text

Hex	Color Role	Element
#BCFFDF	Primary	1.Container
#0B1C28	On primary	2.Label Text

حالت‌ها

چیدمان

Text Button

رنگ

Hex	Color Role	Element
#3ECF8A	Primary	1.Container
#0B1C28	On primary	2.Label Text

Hex	Color Role	Element
#BCFFDF	Primary	1.Container
#0B1C28	On primary	2.Label Text

حالت‌ها

چیدمان

Filled Button

پیاده سازی کامپوننت Filled Button در حالت Light

                                                                                                          
<button class="sdp-btn sdp-btn-filled sdp-btn-filled-primary">primary</button>
<button class="sdp-btn sdp-btn-filled sdp-btn-filled-secondary">secondry</button>
<button class="sdp-btn sdp-btn-filled sdp-btn-filled-tertiary">tertiary</button>


                                                            
.sdp-btn {
    padding: 12px 24px;
    border-radius: 0.313rem;
    border: 0;
    min-width: 6rem;
    text-decoration: none;
    text-align: center;
    margin: 4px;
    font-family: 'poppins';
}

.sdp-btn-filled {
    border-radius: 5px;
    border: 0;
}

.sdp-btn-filled-primary {
    background: #0A592B;
    color: #FFFFFF;
}

.sdp-btn-filled-primary:hover {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background: #C0FFDA;
    color: #0A592B;
}

.sdp-btn-filled-primary:active {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background: #8DFFBD;
    color: #0A592B;
}

.sdp-btn-filled-primary:focus {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background: #8DFFBD;
    color: #0A592B;
}


.sdp-btn-filled-secondary {
    background-color: #182F40;
    color: #ffffff;

}

.sdp-btn-filled-secondary:hover {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #DFF2FF;
    color: #182F40;
}

.sdp-btn-filled-secondary:active {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #BDDDF4;
    color: #182F40;
}

.sdp-btn-filled-secondary:focus {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #BDDDF4;
    color: #182F40;
}

.sdp-btn-filled-tertiary {
    background-color: #015558;
    color: #FFFFFF;
}

.sdp-btn-filled-tertiary:hover {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #C2FDFF;
    color: #015558;
}

.sdp-btn-filled-tertiary:active {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #92FBFF;
    color: #015558;
}

.sdp-btn-filled-tertiary:focus {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #92FBFF;
    color: #015558;
}

Filled Button (Dark)

پیاده سازی کامپوننت Filled Button در حالت Dark

                                                        

<button class="sdp-btn sdp-btn-filled sdp-btn-filled-primary">primary</button>
<button class="sdp-btn sdp-btn-filled sdp-btn-filled-secondary">secondry</button>
<button class="sdp-btn sdp-btn-filled sdp-btn-filled-tertiary">tertiary</button>


                                                            
.sdp-btn {
    padding: 12px 24px;
    border-radius: 0.313rem;
    border: 0;
    min-width: 6rem;
    text-decoration: none;
    text-align: center;
    margin: 4px;
    font-family: 'poppins';
}

.sdp-btn-filled {
    border-radius: 5px;
    border: 0;
}

.sdp-btn-filled-primary {
    background: #0A592B;
    color: #FFFFFF;
}

.sdp-btn-filled-primary:hover {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background: #C0FFDA;
    color: #0A592B;
}

.sdp-btn-filled-primary:active {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background: #8DFFBD;
    color: #0A592B;
}

.sdp-btn-filled-primary:focus {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background: #8DFFBD;
    color: #0A592B;
}


/* dark */
.dark .sdp-btn-filled-primary {
    background-color: #BCFFDF;
    color: #0B1C28;
}

.dark .sdp-btn-filled-primary:hover {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #65CA9A;
    color: #0B1C28;
}

.dark .sdp-btn-filled-primary:active {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #92FBFF;
    color: #015558;
}

.dark .sdp-btn-filled-primary:focus {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #92FBFF;
    color: #015558;
}

.sdp-btn-filled-secondary {
    background-color: #182F40;
    color: #ffffff;

}

.sdp-btn-filled-secondary:hover {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #DFF2FF;
    color: #182F40;
}

.sdp-btn-filled-secondary:active {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #BDDDF4;
    color: #182F40;
}

.sdp-btn-filled-secondary:focus {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #BDDDF4;
    color: #182F40;
}

.dark .sdp-btn-filled-secondary{
    background-color: #BEE3FF;
    color: #182F40;
}

.dark .sdp-btn-filled-secondary:hover{
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #88CDFF;
    color: #182F40;
}

.dark .sdp-btn-filled-secondary:active{
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #5392C0;
    color: #0B1C28;
}

.dark .sdp-btn-filled-secondary:focus{
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #5392C0;
    color: #0B1C28;
}

.sdp-btn-filled-tertiary {
    background-color: #015558;
    color: #FFFFFF;
}

.sdp-btn-filled-tertiary:hover {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #C2FDFF;
    color: #015558;
}

.sdp-btn-filled-tertiary:active {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #92FBFF;
    color: #015558;
}

.sdp-btn-filled-tertiary:focus {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #92FBFF;
    color: #015558;
}

.dark .sdp-btn-filled-tertiary{
    background-color: #B2EBF2;
    color: #006064;
}

.dark .sdp-btn-filled-tertiary:hover{
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #80DEEA;
    color: #006064;
}

.dark .sdp-btn-filled-tertiary:active{
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #6CDBEF;
    color: #006064;
}

.dark .sdp-btn-filled-tertiary:focus{
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #6CDBEF;
    color: #006064;
}

Outlined Button

پیاده سازی کامپوننت Outlined Button در حالت Light

                                                            

<button class="sdp-btn sdp-btn-outlined sdp-btn-outlined-primary">primary</button>
<button class="sdp-btn sdp-btn-outlined sdp-btn-outlined-secondary">secondary</button>
<button class="sdp-btn sdp-btn-outlined sdp-btn-outlined-tertiary">tertiary</button>


                                                            

.sdp-btn {
    padding: 12px 24px;
    border-radius: 0.313rem;
    border: 0;
    min-width: 6rem;
    text-decoration: none;
    text-align: center;
    margin: 4px;
    font-family: 'poppins';
}

.sdp-btn-outlined {
    border: 1px solid #A3A3A3 !important;
}

.sdp-btn-outlined-primary {
    border: 1px solid #A3A3A3;
    background-color: #FFFFFF;
    color: #0A592B;
}

.sdp-btn-outlined-primary:hover {
    border: 1px solid #A3A3A3;
    background-color: #F3FFF8;
    color: #0A592B;
}

.sdp-btn-outlined-primary:active {
    border: 1px solid #0A592B;
    background-color: #DAFFE9;
    color: #0A592B;
}

.sdp-btn-outlined-primary:focus {
    border: 1px solid #0A592B;
    background-color: #DAFFE9;
    color: #0A592B;
}

.sdp-btn-outlined-secondary {
    border: 1px solid #A3A3A3;
    background-color: #FFFFFF;
    color: #182F40;
}

.sdp-btn-outlined-secondary:hover {
    border: 1px solid #A3A3A3;
    background-color: #F9FCFF;
    color: #182F40;
}

.sdp-btn-outlined-secondary:active {
    border: 1px solid #182F40;
    background-color: #ECF7FF;
    color: #182F40;
}

.sdp-btn-outlined-secondary:focus {
    border: 1px solid #182F40;
    background-color: #ECF7FF;
    color: #182F40;
}


.sdp-btn-outlined-tertiary {
    border: 1px solid #A3A3A3;
    background-color: #FFFFFF;
    color: #015558;
}

.sdp-btn-outlined-tertiary:hover {
    border: 1px solid #A3A3A3;
    background-color: #F1FEFF;
    color: #015558;
}

.sdp-btn-outlined-tertiary:active {
    border: 1px solid #015558;
    background-color: #DAFDFF;
    color: #015558;
}

.sdp-btn-outlined-tertiary:focus {
    border: 1px solid #015558;
    background-color: #DAFDFF;
    color: #015558;
}

Outlined Button (Dark)

پیاده سازی کامپوننت Outlined Button در حالت Dark

                                                            
<button class="sdp-btn sdp-btn-outlined sdp-btn-outlined-primary">primary</button>
<button class="sdp-btn sdp-btn-outlined sdp-btn-outlined-secondary">secondary</button>
<button class="sdp-btn sdp-btn-outlined sdp-btn-outlined-tertiary">tertiary</button>


                                                            
.sdp-btn {
    padding: 12px 24px;
    border-radius: 0.313rem;
    border: 0;
    min-width: 6rem;
    text-decoration: none;
    text-align: center;
    margin: 4px;
    font-family: 'poppins';
}                                                                

.sdp-btn-outlined {
    border: 1px solid #A3A3A3 !important;
}

.sdp-btn-outlined-primary {
    border: 1px solid #A3A3A3;
    background-color: #FFFFFF;
    color: #0A592B;
}

.sdp-btn-outlined-primary:hover {
    border: 1px solid #A3A3A3;
    background-color: #F3FFF8;
    color: #0A592B;
}

.sdp-btn-outlined-primary:active {
    border: 1px solid #0A592B;
    background-color: #DAFFE9;
    color: #0A592B;
}

.sdp-btn-outlined-primary:focus {
    border: 1px solid #0A592B;
    background-color: #DAFFE9;
    color: #0A592B;
}

.dark .sdp-btn-outlined-primary{
    border: 1px solid #BDBDBD;
    background-color: #1F1F1F;
    color: #BCFFDF;
}

.dark .sdp-btn-outlined-primary:hover{
    border: 1px solid #BDBDBD;
    background: #2c312f;
    color: #BCFFDF;
}

.dark .sdp-btn-outlined-primary:active{
    background: #23392f;
    color: #BCFFDF;
}

.dark .sdp-btn-outlined-primary:focus{
    background: #23392f;
    color: #BCFFDF;
}


.sdp-btn-outlined-secondary {
    border: 1px solid #A3A3A3;
    background-color: #FFFFFF;
    color: #182F40;
}

.sdp-btn-outlined-secondary:hover {
    border: 1px solid #A3A3A3;
    background-color: #F9FCFF;
    color: #182F40;
}

.sdp-btn-outlined-secondary:active {
    border: 1px solid #182F40;
    background-color: #ECF7FF;
    color: #182F40;
}

.sdp-btn-outlined-secondary:focus {
    border: 1px solid #182F40;
    background-color: #ECF7FF;
    color: #182F40;
}

.dark .sdp-btn-outlined-secondary{
    border: 1px solid #BDBDBD;
    background-color: #1F1F1F;
    color: #BEE3FF;
}

.dark .sdp-btn-outlined-secondary:hover{
    border: 1px solid #BDBDBD;
    background: #2f3131;
    color: #BEE3FF;
}

.dark .sdp-btn-outlined-secondary:active{
    background: #3c3f40;
    color: #BEE3FF;
}

.dark .sdp-btn-outlined-secondary:focus{
    background: #3c3f40;
    color: #BEE3FF;
}

.sdp-btn-outlined-tertiary {
    border: 1px solid #A3A3A3;
    background-color: #FFFFFF;
    color: #015558;
}

.sdp-btn-outlined-tertiary:hover {
    border: 1px solid #A3A3A3;
    background-color: #F1FEFF;
    color: #015558;
}

.sdp-btn-outlined-tertiary:active {
    border: 1px solid #015558;
    background-color: #DAFDFF;
    color: #015558;
}

.sdp-btn-outlined-tertiary:focus {
    border: 1px solid #015558;
    background-color: #DAFDFF;
    color: #015558;
}

.dark .sdp-btn-outlined-tertiary{
    border: 1px solid #BDBDBD;
    background-color: #1F1F1F;
    color: #B2EBF2;
}

.dark .sdp-btn-outlined-tertiary:hover{
    border: 1px solid #BDBDBD;
    background: #2f3131;
    color: #B2EBF2;
}

.dark .sdp-btn-outlined-tertiary:active{
    background: #353d3e;
    color: #B2EBF2;
}

.dark .sdp-btn-outlined-tertiary:focus{
    background: #353d3e;
    color: #B2EBF2;
}

Text Button

پیاده سازی کامپوننت Text Button در حالت Light

                                                            

<button class="sdp-btn sdp-btn-text sdp-btn-text-primary">primary</button>
<button class="sdp-btn sdp-btn-text sdp-btn-text-secondary">secondary</button>
<button class="sdp-btn sdp-btn-text sdp-btn-text-tertiary">tertiary</button>


                                                            
.sdp-btn {
    padding: 12px 24px;
    border-radius: 0.313rem;
    border: 0;
    min-width: 6rem;
    text-decoration: none;
    text-align: center;
    margin: 4px;
    font-family: 'poppins';
}

.sdp-btn-text-primary {
    background-color: transparent;
    color: #0A592B;
}

.sdp-btn-text-primary:hover {
    background: #F3FFF8;
    color: #0A592B;
}

.sdp-btn-text-primary:active {
    background-color: #DAFFE9;
    color: #0A592B;
}

.sdp-btn-text-primary:focus {
    background-color: #DAFFE9;
    color: #0A592B;
}

.sdp-btn-text-secondary {
    background-color: transparent;
    color: #182F40;
}

.sdp-btn-text-secondary:hover {
    background: #F9FCFF;
    color: #182F40;
}

.sdp-btn-text-secondary:active {
    background-color: #ECF7FF;
    color: #182F40;
}

.sdp-btn-text-secondary:focus {
    background-color: #ECF7FF;
    color: #182F40;
}

.sdp-btn-text-tertiary {
    background-color: transparent;
    color: #015558;
}

.sdp-btn-text-tertiary:hover {
    background: #F1FEFF;
    color: #015558;
}

.sdp-btn-text-tertiary:active {
    background-color: #DAFDFF;
    color: #015558;
}

.sdp-btn-text-tertiary:focus {
    background-color: #DAFDFF;
    color: #015558;
}

Text Button (Dark)

پیاده سازی کامپوننت Text Button در حالت Dark

                                                            

<button class="sdp-btn sdp-btn-text sdp-btn-text-primary">primary</button>
<button class="sdp-btn sdp-btn-text sdp-btn-text-secondary">secondary</button>
<button class="sdp-btn sdp-btn-text sdp-btn-text-tertiary">tertiary</button>


                                                            
.sdp-btn {
    padding: 12px 24px;
    border-radius: 0.313rem;
    border: 0;
    min-width: 6rem;
    text-decoration: none;
    text-align: center;
    margin: 4px;
    font-family: 'poppins';
}

.sdp-btn-text-primary {
    background-color: transparent;
    color: #0A592B;
}

.sdp-btn-text-primary:hover {
    background: #F3FFF8;
    color: #0A592B;
}

.sdp-btn-text-primary:active {
    background-color: #DAFFE9;
    color: #0A592B;
}

.sdp-btn-text-primary:focus {
    background-color: #DAFFE9;
    color: #0A592B;
}

.dark .sdp-btn-text-primary{
    background-color: transparent;
    color: #BCFFDF;
}

.dark .sdp-btn-text-primary:hover{
    background: #254a39;
    color: #BCFFDF;
}

.dark .sdp-btn-text-primary:active{
    background-color: #285f44;
    color: #BCFFDF;
}

.dark .sdp-btn-text-primary:focus{
    background-color: #285f44;
    color: #BCFFDF;
}

.sdp-btn-text-secondary {
    background-color: transparent;
    color: #182F40;
}

.sdp-btn-text-secondary:hover {
    background: #F9FCFF;
    color: #182F40;
}

.sdp-btn-text-secondary:active {
    background-color: #ECF7FF;
    color: #182F40;
}

.sdp-btn-text-secondary:focus {
    background-color: #ECF7FF;
    color: #182F40;
}

.dark .sdp-btn-text-secondary{
    background-color: transparent;
    color: #BEE3FF;
}

.dark .sdp-btn-text-secondary:hover{
    background: #1d262d;
    color: #BEE3FF;
}

.dark .sdp-btn-text-secondary:active{
    background-color: #1a2832;
    color: #BEE3FF;
}

.dark .sdp-btn-text-secondary:focus{
    background-color: #1a2832;
    color: #BEE3FF;
}

.sdp-btn-text-tertiary {
    background-color: transparent;
    color: #015558;
}

.sdp-btn-text-tertiary:hover {
    background: #F1FEFF;
    color: #015558;
}

.sdp-btn-text-tertiary:active {
    background-color: #DAFDFF;
    color: #015558;
}

.sdp-btn-text-tertiary:focus {
    background-color: #DAFDFF;
    color: #015558;
}

.dark .sdp-btn-text-tertiary{
    background-color: transparent;
    color: #B2EBF2;
}

.dark .sdp-btn-text-tertiary:hover{
    background: #3d4849;
    color: #B2EBF2;
}

.dark .sdp-btn-text-tertiary:active{
    background-color: #5a7174;
    color: #B2EBF2;
}

.dark .sdp-btn-text-tertiary:focus{
    background-color: #5a7174;
    color: #B2EBF2;
}

موارد استفاده

به طور کلی Filled buttonها، دارای بیشترین تاکید و تاثیر هستند. به همین دلیل بهتر است هنگامی استفاده شوند که لازم است تا بیشترین توجه کاربر جلب شود تا فعالیت خاص و مهمی مانند ثبت‌نام را انجام دهد
معمولا Outlined Buttonها دارای تاکید نسبی هستند و در مواردی استفاده می‌شوند که فعالیتی ثانویه قرار است انجام شود که میزان اهمیت آن از فعالیت اولیه کمتر است .
حالت Text button ، معمولا آخرین تاکید و اولویت را در بین Button ها دارد و در مواردی استفاده میشوند که اهمیت کمتری دارند

حالت Buttonها باید برای کاربر قابل تشخیص باشد. برای مثال ممکن است Button در حالت فعال یا غیرفعال باشد.

عرض Buttonها باید با توجه به طول متن داخلی‌ آن‌ها تنظیم شود.

کد مورد نظر شما کپی شد

سیستم طراحی شرکت سپانو دیتا پارس

Common Button

موارد استفاده