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.

This is an embed external element. It can be deleted using the delete key or the backspace key. To view the full element, press the preview button below.
Image
01.png
199.2 KB
This is an embed external element. It can be deleted using the delete key or the backspace key. To view the full element, press the preview button below.
Image
02.png
187.04 KB
This is an embed external element. It can be deleted using the delete key or the backspace key. To view the full element, press the preview button below.
Image
03.png
188.98 KB


Like I want this type of button effect in buttons

This is an embed external element. It can be deleted using the delete key or the backspace key. To view the full element, press the preview button below.


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.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.