How can I make my button stay transparent when clicked? - css

Question

white button
I was trying to make a vertical navbar with a background image. But as I clicked the button, they turned to white. What steps can I take to make them stay white? Like, I've tried primary-outline stuff I searched, but it doesn't work out.

Answer 1

Have you tried to define pseudo classes for your button, link?
/* unvisited link */
a:link {
background-color: #ffffff;
}
/* visited link */
a:visited {
background-color: #ffffff;
}
/* mouse over link */
a:hover {
background-color: #ffffff;
}
/* selected link */
a:active {
background-color: #ffffff;
}

Answer 2

I have solved this myself. It was because there was a fault in my markup. I added inside . But I still don't know why this is wrong. Here's the codepen:
<div class="paintallblack">
<div class="row">
<!--let's row this. Like, 1 md for vertical navbar, 5 md each for the rest -->
<div class="col-md-1 verticalnav">
<div class="nav nav-pills nav-stacked">
<a class="btn" href="#mypic">
A<br>b<br>o<br>u<br>t</a>
<a class="btn" href="#">
P<br>o<br>r<br>t<br>f<br>o<br>l<br>i<br>o</a>
<a class="btn" href="#"> C<br>o<br>n<br>t<br>a<br>c<br>t</a>
</div>
</div>
<div class="col-md-5 col-md-offset-1 leftcontent">
<!--LEFT PART CONTENTS FOR ABOUT, PORT, AND CONTACT-->
<img id="mypic" src="https://scontent-sit4-1.xx.fbcdn.net/v/t1.0-9/15940460_161286387692018_3963016562080030457_n.jpg?oh=6e79da88fff3df387121a5ac66a7de32&oe=59212A06" alt="mystupidface">
</div>
<div class="col-md-5 rightcontent">
<!--RIGHT PART CONTENTS FOR ABOUT, PORT, AND CONTACT-->
<p>Here I am, struggling to learn web development in order to build my own online magazine one day. Who am I? What do I do? In clear weather, I run. I can write stories, poetries, book reviews, compose musics, draw pictures. But nowadays my priorities
are: run for my health, learn to code, and try to read and write science-fiction as frequent as I can.</p>
</div>
</div>
http://codepen.io/Hertzsprung/pen/JEKxwN.

Answer 3

Bootstrap default style is
.btn-link, .btn-link:active, .btn-link:focus, .btn-link:hover {
border-color: transparent;
}
Override the style btn-link border-color:#fff; not transparent
Here is
.btn-link, .btn-link:active, .btn-link:focus, .btn-link:hover {
border-color: #fff;
}