CODEWITHSUNDEEP
vuejs2buefy
agm1984
agm1984

Reputation: 17168

How to style Buefy buttons to look like text links

I'm trying to style a Buefy button to look like a simple text-link.

For example, it is possible to use:

<b-button
    tag="a"
    type="is-text"
    href="https://www.example.com"
>
    Click here
</b-button>

This produces near the result I'm looking for, except I want to achieve a type such as is-text-red and is-text-blue to make the button appear as text of particular colours.

I could solve this by simply using:

<a href="https://www.example.com" class="red-link">Click here</a>
<a href="https://www.example.com" class="blue-link">Click here</a>

But I want to use <b-button type="is-text-red"> to make an inline link.

Can anyone point me in a direction that involves Bulma CSS and/or Buefy CSS modifications that would achieve this?

I'm looking at the node_modules BButton component, and it looks like the type prop is passed through, so it looks possible to create a custom type somewhere that would be analogous to is-info and is-warning.

I would like to have text-only versions such as is-text-info and is-text-warning so I can use the button component to place inline anchor tags.

Stated concisely, how does a person add another type to <b-button> that provides arbitrary styling?

Upvotes: 0

Views: 1876

Answers (2)

Frontend Backend Bookend
Frontend Backend Bookend

Reputation: 133

I think what you are looking for is probably : type="is-ghost". This renders the button as a simple text link without the padding and hover styles.

Upvotes: 2

adil hussain
adil hussain

Reputation: 910

Check this link(https://buefy.org/documentation/customization/). You might need to define your own css overrides.

Upvotes: 1

Related Questions