How to create custom button

rahuludhani

https://rdesignstudio.in/iDataOps/

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.

01.png

02.png

03.png

Like I want this type of button effect in buttons

https://codepen.io/JavaScriptJunkie/pen/pPRooV

Phil

Hi,

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

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

rahuludhani

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;}

Phil

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

rahuludhani

No its not working

Phil

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next