Fix the style of the CSS for the Bootstrap button

Question

Fix the style of the CSS for the Bootstrap button

I am currently testing two social media buttons, one using an Anchor Tag and the other using a Button Tag for experimental purposes.

The problem I am facing is that when I click on the button, its color and border change to the default bootstrap .btn styling (black color, blue border) instead of the desired #33CAFF color and border.

It should be noted that the color changes back to #33CAFF once I click elsewhere on the screen.

However, my objective is to have the styling return to its pre-click state after clicking the button.

For visual reference, here are images illustrating the current behavior:

Current State: https://i.sstatic.net/7M82Q.jpg

Desired State: https://i.sstatic.net/e9lE4.jpg

css html twitter-bootstrap

Answer 1

Answer №1

Kindly insert your preferred color code in CSS as demonstrated below:

.btn or button class / Id name: focus{
color:#33CAFF; (your color code)
}

Answer 2

Kindly insert your preferred color code in CSS as demonstrated below:

.btn or button class / Id name: focus{
color:#33CAFF; (your color code)
}

Answer 3

Answer №2

To implement this design, simply insert the following code:

.myBtn:focus {
    background-color:#fff;
    color:#33CAFF;
    outline:none;
}

You can view a live demo of this code on JSFiddle.

Answer 4

To implement this design, simply insert the following code:

.myBtn:focus {
    background-color:#fff;
    color:#33CAFF;
    outline:none;
}

You can view a live demo of this code on JSFiddle.

Answer 5

Answer №3

You opted to use <a> for facebook and <button> for twitter

@import url(https://fonts.googleapis.com/css?family=Nunito);
body{
  background-color:#33CAFF;
  font-family:'Nunito',sans-serif;
}
#myDiv{
  background-color:#fff;
  color:#33CAFF;
  margin-top:20px;
  padding:20px;
  line-spacing:1.5px;
}
.myBtn{
  background-color:#fff;
  color:#33CAFF;
  border:1px solid #33CAFF;
  border-radius:0;
  padding:10px;
  margin:5px;
}
a:visited{
  background-color:#fff;
  color:#33CAFF;
}
.myBtn:hover{
  background-color:#33CAFF;
  color:#fff;
  text-decoration:none;
}
a:active{
  background-color:#fff;
  color:#33CAFF;
}
button:focus{
}

<div class="container">
  <div class="row">
    <div id="myDiv" class="col-sm-6 col-sm-offset-3 text-center">
      <h2>Some Text goes here</h2>
      <p>Lorem ipsum dolor sit amet, te eam option discere saperet, quo porro libris te, quo ea eirmod gloriatur. Qui et mutat numquam consetetur, mei blandit delectus no, eam at adipisci senserit. Cibo error at mei. At pri nullam altera, pri diam noster scripta eu. Eu quot iudicabit sadipscing vix.       </p>
      <a type="button" class="btn myBtn">
        <i class="fa fa-facebook"></i> Facebook
      </a>
      <a type="button" class="btn myBtn">
        <i class="fa fa-twitter"></i> Twitter
      </a>
    </div>
  </div>
</div>

Access the JSFiddle link for more information

Answer 6

You opted to use <a> for facebook and <button> for twitter

@import url(https://fonts.googleapis.com/css?family=Nunito);
body{
  background-color:#33CAFF;
  font-family:'Nunito',sans-serif;
}
#myDiv{
  background-color:#fff;
  color:#33CAFF;
  margin-top:20px;
  padding:20px;
  line-spacing:1.5px;
}
.myBtn{
  background-color:#fff;
  color:#33CAFF;
  border:1px solid #33CAFF;
  border-radius:0;
  padding:10px;
  margin:5px;
}
a:visited{
  background-color:#fff;
  color:#33CAFF;
}
.myBtn:hover{
  background-color:#33CAFF;
  color:#fff;
  text-decoration:none;
}
a:active{
  background-color:#fff;
  color:#33CAFF;
}
button:focus{
}

<div class="container">
  <div class="row">
    <div id="myDiv" class="col-sm-6 col-sm-offset-3 text-center">
      <h2>Some Text goes here</h2>
      <p>Lorem ipsum dolor sit amet, te eam option discere saperet, quo porro libris te, quo ea eirmod gloriatur. Qui et mutat numquam consetetur, mei blandit delectus no, eam at adipisci senserit. Cibo error at mei. At pri nullam altera, pri diam noster scripta eu. Eu quot iudicabit sadipscing vix.       </p>
      <a type="button" class="btn myBtn">
        <i class="fa fa-facebook"></i> Facebook
      </a>
      <a type="button" class="btn myBtn">
        <i class="fa fa-twitter"></i> Twitter
      </a>
    </div>
  </div>
</div>

Access the JSFiddle link for more information

Answer 7

Answer №4

To implement this style change using CSS, you can use the following code:

.myBtn:focus
    {
    background-color:#fff;
    color:#33CAFF;
    border:1px solid #33CAFF;
    }

However, I fail to understand why one element needs to be styled as a button while the other as a link.

Answer 8

To implement this style change using CSS, you can use the following code:

.myBtn:focus
    {
    background-color:#fff;
    color:#33CAFF;
    border:1px solid #33CAFF;
    }

However, I fail to understand why one element needs to be styled as a button while the other as a link.

Fix the style of the CSS for the Bootstrap button

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Utilizing the power of JavaScript, CSS, and HTML to seamlessly transfer selected items from one webpage to the shopping cart displayed on another page

Using JQuery to manipulate `this`, its children, its siblings, and more

Switching effortlessly between Fixed and Relative positioning

Is there a way to ensure uniform font display across all browsers?

What could be causing the appearance of a mysterious grey box hovering in the upper left portion of my image and why is the code only adjusting the size of the grey box instead of the entire

What is the best way to add CSS to email addresses that are hidden by the WordPress antispambot feature?

How to toggle the visibility of checkboxes in JavaScript based on their checked status

Initiate the React application with the given external parameters

Here's a unique rewrite: "Learn how to manipulate the CSS class of a textarea element (specifically in NicEdit) by utilizing the addClass

The peculiar effect of a CSS element's border on surrounding elements is quite unusual

Creating a visual that when clicked, reveals an enlarged version at a different location

Displaying information on a table using data from three separate JSON arrays within AngularJS

Updating information on a website

Ways to evaluate the amount of traffic on a webpage?

What methods do publications use to manage HTML5 banner advertisements?

Merge two separate arrays to create a new associative array

The alignment of an image within a bootstrap table cell may not appear centered

Manage image placement using CSS object-position

Combining different HTML table borders

Header with Sticky Behavior and Smooth Slide Down Animation