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

2 Replies

TranceCodeOP•8mo 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;
    }
}

TranceCodeOP•8mo ago

Gaming

Programming

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