Button that behaves / looks like link

[tony]

Similar bootstrap behavior of .btn-link. Example:

Docs: https://getbootstrap.com/docs/4.0/components/buttons/

Source: https://github.com/twbs/bootstrap/blob/1a4a94bfd90626bdd48cea0c0d4bf0293f052edb/scss/_buttons.scss

This is helpful in cases of "back" buttons in form wizards, where forms need to be submitted when traversing form steps.

[aaronang]

@tony Is this what you are looking for?

<a class="button is-link">Link</a>

See https://bulma.io/documentation/elements/button/#colors for more information.

[tony]

is-text and is-link aren't equivalent to bootstrap's btn-link. They don't behave like a text link.

Bulma's is-link is only a color modifier. It's still a button.

Bulma's is-text has an underline, and the color / behavior isn't the same as a link. It has a background.

Bootstrap's .btn-link has no button styling. It looks like a normal link.

An example use case for this is when a backend requires a form submission (such as a session-based form wizard), but you want the back object to only show as a text link (not a button).

The only other way around that would be to use a link and begin wiring in JavaScript to simulate a form submission when a link is clicked.

[jimblue]

I agree with @tony, button is-link shouldn't be a color modifier but a look modifier to mimic a link.
An other good exemple is from Spectre: https://picturepan2.github.io/spectre/elements.html#buttons

Very useful feature regarding to UX as a link can be very difficult to click because of the small size.
A button that mimic a link is ideal because of padding.

[AustinGomez]

This would also be useful for a11y reasons. Anchor tags require hrefs to be keyboard accessible. If you have a link without an href then it would be nice to make it a button that looks like a link

[lpolon]

I've been using button tag with link styling in bulma with the following modifiers:

<button class="button is-link is-light has-background-white">link</button>

[jrock17]

This would be very useful. Any progress?

[devonlambert]

Any Progress on this one?

In the short term I've created my own .btn-link class which seeks to resolve this for my theme locally. That being said, it would be nice to have this functionality straight from the source.

[svdHero]

I would also appreciate such a feature. I quite often have a Fontawesome icon that should trigger some action on mouse-click and that I want to style like a hyperlink, i.e. hyperlink color, mouse cursor, mouse-over effect, without having a button look-and-feel.

Maybe as a side-question: Is there already a button style that just renders a Fontawesome icon and nothing else? No, button border, no button background?

[getup8]

I'm using something like this, if helpful to anyone. Could def be improved, I'm sure.

// A button that looks like a link. Useful for JS-only actions.
.button-link {
  font-weight: 400;
  color: $link;
  background-color: transparent;
  border-color: transparent;

  &:hover {
    color: $link-hover;
    text-decoration: underline;
    background-color: transparent;
    border-color: transparent;
  }

  &:focus {
    text-decoration: underline;
    border-color: transparent;
    box-shadow: none;
  }

  // Remove all padding and height so it's just plain, unpadded text.
  &.button-text {
    padding: 0;
    height: unset;
  }
}

[svdHero]

Thanks @getup8 for your code snippet. However, in my case, I am new to frontend programming (backend guy here). I do not use SASS and also try to use as little CSS as possible. That's why I love Bulma so much.
It would be great if Bulma had a link button (also supporting fontawesome icons in link style) out of the box.

[zombiesbyte]

I used this and I thought I'd post it here as an additional workaround.

button
  &.is-ahref
    appearance: unset;
    background-color: transparent;
    color: $link;
    border: none;
    padding: 0;
    font-size: 1em;
    cursor: pointer;
    &:hover
      color: $link-hover;

[geekq]

The disadvantage of has-background-white is that usability decreases - the hover affect disappears.
So based on the suggestion of @lpolon I use

<button class="button is-light like-link">link</button>

and only a single additional CSS rule:

.button.is-light.like-link:not(:hover) {
  background-color: white;
}

This also works in combination with color modifiers like is-link, is-primary etc.