如何在具有不同属性（CSS）的圆形中拟合颜色？

Question

I have a CSS circle property like this:

.btn-circle {
  color: #fff;
  background: #5191d1;
  width: 60px;
  height: 60px;
  padding: 18px 0;
  font-size: 24px;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
  margin-bottom: 6px;
  line-height: normal;
  transition: all .3s ease-in-out 0s;
}

And I'm trying to create different CSS properties to choose the color for the button. For example:

.bg-blue {
  background-color: #5191d1 !important;
  border-color: #269abc;
}

// also bg-red, bg-yellow, etc...

The problem is when using "btn-circle bg-blue", my page ends like this:

Instead of this:

Is the problem due to a parent property (col-md-4) ? What can I do?

Thank you.

Answer 1

I used your CSS and its working.

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <style> .btn-circle { color: #fff; background: #5191d1; width: 60px; height: 60px; padding: 18px 0; font-size: 24px; border-radius: 50%; display: block; margin: 0 auto; margin-bottom: 6px; line-height: normal; transition: all .3s ease-in-out 0s; } .bg-blue { background-color: #5191d1 !important; border-color: #269abc; } </style> <div class="container"> <div class="row"> <div class="col-md-4"> <a class="btn btn-circle bg-blue"><i class="glyphicon glyphicon-calendar"></i> </a> </div> </div> </div> 

Answer 2

It would be clearer to reach to the root cause of the problem if you would have provided the html code as well.

Assuming that the a div element with class "btn-circle bg-blue" is inside a parent div. Make sure that the backgound-color of parent div is not same as that of the round div (child).

For example (Correct Code):

 .btn-circle { color: #fff; background: #5191d1; width: 60px; height: 60px; padding: 0px 0; font-size: 24px; border-radius: 50%; display: block; margin: 0 auto; margin-bottom: 6px; line-height: normal; transition: all .3s ease-in-out 0s; } .bg-blue { background-color: #5191d1 !important; border-color: #269abc; } .bg-orange { background-color: #FFD185; } 

 <div class="bg-orange"> <div class="btn-circle bg-blue"> </div> </div> 

Whereas Incorrect Code, would show up like this:

 .btn-circle { color: #fff; background: #5191d1; width: 60px; height: 60px; padding: 0px 0; font-size: 24px; border-radius: 50%; display: block; margin: 0 auto; margin-bottom: 6px; line-height: normal; transition: all .3s ease-in-out 0s; } .bg-blue { background-color: #5191d1 !important; border-color: #269abc; } .bg-orange { background-color: #FFD185; } 

 <div class="bg-blue"> <div class="btn-circle bg-blue"> </div> </div>