F
Filament•11mo ago
TranceCode

How can personalize the buttons style for Create, Delete, Cancel, Save

Hey guys, i working and configuring a new theme in my project, i inspect the desing and can see the 
.fi-btn-label
.fi-btn-label
but this class it not working for me, i add the class for 
.fi-btn
.fi-btn
but this apply for all buttons... however i need add a different style for the button delete, other for button create, other for save, cancel, etc... actually this is my code: 
@layer components {
  .fi-input-wrp {
    @apply focus-within:!ring-1 dark:focus-within:!ring-1;
  }

  .fi-btn {
    @apply text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-4 
    focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 shadow-lg shadow-red-500/50 
    dark:shadow-lg dark:shadow-red-800/80 font-medium rounded-2xl text-sm px-5 py-2.5 text-center me-2 mb-2;
  }    
}
@layer components {
  .fi-input-wrp {
    @apply focus-within:!ring-1 dark:focus-within:!ring-1;
  }

  .fi-btn {
    @apply text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-4 
    focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 shadow-lg shadow-red-500/50 
    dark:shadow-lg dark:shadow-red-800/80 font-medium rounded-2xl text-sm px-5 py-2.5 text-center me-2 mb-2;
  }    
}
how can identify the exactly button? i mean the button delete, the button save, etc. Thank you
No description
No description
2 Replies
TranceCode
TranceCodeOP•11mo ago
oh i fix it! 
@layer components {

    .fi-input-wrp {
        @apply focus-within:!ring-1 dark:focus-within:!ring-1;
    }

    .fi-ac .fi-btn-color-danger  {
        @apply  text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-1 
                focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 shadow-lg shadow-red-500/50 
                dark:shadow-lg dark:shadow-red-800/80 font-medium rounded-2xl text-sm px-5 py-2.5 text-center me-2 mb-2;
    }
    
    .fi-ac .fi-btn-color-primary  {
        @apply  text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-1 
                focus:outline-none shadow-lg shadow-lime-500/50 dark:shadow-lg 
                dark:shadow-lime-800/80 font-medium rounded-2xl text-sm px-5 py-2.5 text-center me-2 mb-2;
    }
}
@layer components {

    .fi-input-wrp {
        @apply focus-within:!ring-1 dark:focus-within:!ring-1;
    }

    .fi-ac .fi-btn-color-danger  {
        @apply  text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-1 
                focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 shadow-lg shadow-red-500/50 
                dark:shadow-lg dark:shadow-red-800/80 font-medium rounded-2xl text-sm px-5 py-2.5 text-center me-2 mb-2;
    }
    
    .fi-ac .fi-btn-color-primary  {
        @apply  text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-1 
                focus:outline-none shadow-lg shadow-lime-500/50 dark:shadow-lg 
                dark:shadow-lime-800/80 font-medium rounded-2xl text-sm px-5 py-2.5 text-center me-2 mb-2;
    }
}
TranceCode
TranceCodeOP•11mo ago
No description

Did you find this page helpful?