How to create custom button

When I am creating custom css on my button, it's not working. I have placed css ids to it & define css in advanced setting css. It's getting same default settings, I don't want that. You may check on right side BOOK A DEMO button. check attachment for your reference.


Like I want this type of button effect in buttons


Comments

  • Hi,

    You should also add .button class to your custom CSS, and !important to all properties.

    Best regards

  • No it is still not working plz check once, Below css I'm using

    .btn-hover .button {

      color: #fff!important;

      cursor: pointer;

    text-align:center;

      border: none;

      background-size: 300% 100%;

       moz-transition: all .4s ease-in-out;

      -o-transition: all .4s ease-in-out;

      -webkit-transition: all .4s ease-in-out;

      transition: all .4s ease-in-out;

    }


    .btn-hover:hover .button {

      background-position: 100% 0!important;

      moz-transition: all .4s ease-in-out;

      -o-transition: all .4s ease-in-out;

      -webkit-transition: all .4s ease-in-out;

      transition: all .4s ease-in-out;

    }


    .btn-hover:focus .button {

      outline: none!important;

    }

    .btn-hover.mainbtn .button {

    background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19!important;}

  • If you recheck the screenshot I attached you will notice that every single line has !important at the end.

    Please add it and recheck your button's behavior.


    Thanks

  • No its not working

  • Ensure that your whole CSS is correct and you do not have any typos etc.

    If you do not find anything, I suggest contacting your web developer regarding this, as we provide help with minor custom CSS, and this one is complex.


    Best regards

Sign In or Register to comment.