0

Is it possible to make the text in an a tag with the class "btn btn-default" match the background image? I am using Bootstrap 3.3.7 in Razor.

Here is the code in question:

<a class="btn btn-default" href="@Url.Action("Login", "Account")">Log in</a>

I want to make the button's text match the background. The button as it currently is is shown in the image provided by the following link:

Log in button

As you can see, the text in the button is just grey, but I want the text to match the background, exactly. Would it be possible to make the text in this button match the background in a Razor view (Bootstrap 3.3.7)?

Here is an example of what I want but implemented in Android.

Thanks!

Edit: I have seen this solution, already. The problem with this is that as I scroll up and down the page, the text does not match the background behind itself, as if the text stayed in the same position at the top of the page the whole time. The text is actually nested, as shown in the following code:

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a class="btn btn-default" href="@Url.Action("Login", "Account")">

Simplified version of what I want:

Link that shows exactly what I want

I am sorry for not being clearer in the beginning, but you see the "Register" and "Login" buttons at the top right? I want "Register" and "Login" to be transparent, so when you scroll up and down, you can see the background through "Register" and "Login".

bhlee90
  • 9
  • 4
  • 2
    `background-clip`, could help , `mix-blend-mode` could also help if bg and text are spread into different containers . 2 examples https://codepen.io/gc-nomade/pen/KNrMVE -|- https://codepen.io/gc-nomade/pen/rWrvKP -|- check out at http://caniuse.com/#search=mix-blend-mode for supports .-|-. You should set a full example reproducing your issue. (` – G-Cyrillus Aug 15 '17 at 06:53

1 Answers1

0

It is possible. You don't need bootstrap for that.

button {
  padding: 10px 50px;
  background-color: transparent;
  outline: none;
  box-shadow: none;
  border: 2px solid #fff;
  border-radius: 3px;
  font-size: 25px;
  font-weight: bold;
  color: #fff;
  transition: all 0.6s ease;
  cursor: pointer;
}
button:hover {
  background-color: #fff;
  color: #222;
}

Try the codepen link for reference

Abin Thaha
  • 4,493
  • 3
  • 13
  • 41
  • Actually, what I wanted was the opposite. The background should be white, and the text should be transparent. When hovering or focusing on the button, the colors of the button and the text switch with each other. Also, as I scroll up and down the page, the text matches the background. Is it possible to implement my request? – bhlee90 Aug 15 '17 at 07:57
  • It is possible. But not in a direct way. You will need to use some tricks/indirect methods to achieve it. – Abin Thaha Aug 15 '17 at 08:51