Tipp: Show empty buttons

Hey! Little trick for you:

I use this function that helps me avoid having empty buttons in my website.

When I create a website I create all the structure first and then add links and stuff at the end but I always forgot some links to fill.

So I use this little helper:

<script>
jQuery(function($){
    $('span.brxe-button').each(function () {
        $(this).addClass('add-link')
    })
})
</script>    

<style>
.add-link {
    border: 8px solid red !important;
}
</style>

It will add a big red border to all Bricks buttons without a link attached to it so you’ll see them inmediatly :slight_smile:

Hope it’s useful for you!

6 Likes

Hey Bohdan,

actually you don’t even need any JS:

span.brxe-button {
  outline: 8px solid red !important;
}

Or does the additional class have any other benefit?

Best,

André

You’re right. I brought this script from Oxygen and didn’t realise that I can drop the script here and use the span instead :slight_smile:

Thanks!

Little improvement: avoid targeting buttons that dont have links but do have some interaction assigned:

span.brxe-button:not([data-interactions]) {
  outline: 8px solid red !important;
}