1

I want a submit button or input which is styled like a link with "contextual text classes" (e.g. text-secondary for a "secondary link") with Bootstrap 4. When I'm using an <a> tag, the link is perfectly styled. But this way I can't submit without scripting. The other way round, I can use a <button> styled as link, but there is no hover effect. Sure I could write some CSS or JS, but I would prefer to use a Bootstrap-only solution.

Here is a code snippet to show what I'm trying:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<body>

  <p>
    <a href="#" class="text-secondary">"Anchor": How it should look like</a>
  </p>
  <p>
    <button type="submit" class="btn bth-link text-secondary">"button": No hover effect</button>
  </p>
  <p>
    <input type="submit" class="btn bth-link text-secondary" value='"input": No hover effect'>
  </p>

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
Vaibhav Vishal
  • 6,576
  • 7
  • 27
  • 48
roland
  • 900
  • 12
  • 25

1 Answers1

0

You have typo, you are using bth-link instead of btn-link.

See snippet below:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<body>

  <p>
    <a href="#" class="text-secondary">"Anchor": How it should look like</a>
  </p>
  <p>
    <!--use px-0 if you wish to get rid of padding too -->
    <button type="submit" class="btn btn-link text-secondary px-0">"button": No hover effect</button>
  </p>
  <p>
    <input type="submit" class="btn btn-link text-secondary" value='"input": No hover effect'>
  </p>

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
Vaibhav Vishal
  • 6,576
  • 7
  • 27
  • 48