Home Forums Meteorite Rounded buttons

This topic is: resolved

Tagged: , ,

This topic contains 6 replies, has 2 voices, and was last updated by  Terra Themes 1 month, 2 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1021

    wp-vc
    Participant

    Hi there,

    It seems there is only one type of buttons available in the presets with an edged shape (for all buttons in widgets, header etc.). I was wondering whether there’s a way to have rounded buttons by using a certain widget/css code? If that’s currently not possible, I’d like to suggest to implement this option in a future version of the theme.

    Thanks in advance

    #1023

    Terra Themes
    Keymaster

    Hello,

    you can create round buttons by adding this CSS rule.

    .terra-button, .meteorite-button {
      border-radius: 100px;
    }

    Thank you for your suggestion. I made a note of it and will think about it for future themes 🙂

    #1025

    wp-vc
    Participant

    Awesome, thank you!

    #1026

    wp-vc
    Participant

    This works just fine. I just noticed that after applying the CSS code that the rounded buttons are sourrounded by the dotted lines of the original button shape when clicking on it. Even after returning to that section when navigating the site, the dotted shape would still be visible. I couldn’t get a clear print screen of it, I assume an additional CSS element will need to be added to solve this?

    Thanks

    #1028

    Terra Themes
    Keymaster

    the rounded buttons are sourrounded by the dotted lines of the original button shape when clicking on it

    This is a default behaviour of your browser. These dotted lines appear whenever you click on a link. It is also an indicator of where the focus is, when you navigate through the website using the keyboard and the tab key.

    I assume an additional CSS element will need to be added to solve this?

    Notice that if you remove these lines (and not styling them in another way) the accessibility of your website will suffer.

    You can remove the dotted lines when clicking with this CSS rule for all links.

    a:focus {
      outline: none;
    }
    #1029

    wp-vc
    Participant

    Works fine. Thanks for the detailed information on this!

    #1030

    Terra Themes
    Keymaster

    Great!

    I would really appreciate your feedback after working with Meteorite. You can leave a review on the WordPress page about the theme.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.