Button style

  • Resolved met45

    (@met45)


    1 year, 3 months ago

    Hi,

    How can I change the button style with css?

    I copy this code in custom css filed, give btn-6 css class to button and not working ??

    .btn-6::before{
left: 50%;
top: 0;
transition-duration: 0.4s;
}
.btn-6::after{
left: 50%;
bottom: 0;
transition-duration: 0.4s;
}
.btn-6 span::before{
left: 0;
top: 50%;
transition-duration: 0.4s;
}
.btn-6 span::after{
right: 0;
top: 50%;
transition-duration: 0.4s;
}
.btn-6:hover::before, .btn-6:hover::after{
left: 0;
}
.btn-6:hover span::before, .btn-6:hover span::after{
top: 0;
}
Viewing 1 replies (of 1 total)
  • Plugin Support Robert

    (@robertnextendweb)

    Hi @met45!

    I am sorry, but we do not support custom coding. But about your code, 2 things to note:

    1. By default we hide all the before and after elements. So if you want to show these, you need to change the display to block with !important:
      .btn-6::before, .btn-6::after{ display:block!important; }
    2. Your code has lots of errors. It has no content:
      https://css-tricks.com/almanac/selectors/a/after-and-before/
      so you aren’t actually displaying anything. Then I see top, left etc. values being used, but it doesn’t really make sense this way, but instead these should be used with absolute positioning. Additionally, you set styles for span elements as well, but there is no span element in the Button.

    So overall, this code will not work like this, so I would recommend finding someone who can fix this code for you, and achieve what you need, or use our options without custom coding.

Viewing 1 replies (of 1 total)
  • The topic ‘Button style’ is closed to new replies.