CODEWITHSUNDEEP
htmlcssionic-frameworkionic3
zuke
zuke

Reputation: 33

Font Size forces Circle Button Wider

I have a bit of a problem here.

I am using Ionic 3.

I have a circular button with a plus sign in it. When I increase the plus sign font-size up it forces the button wider as you can see here. I have tried setting max-width and !important and many other things but they don't do a thing. Here is what it looks like unscaled

.btnAddImage {
  background: rgba(255, 255, 255, 0.3);
  width: 150px;
  height: 150px;
  color: #4E4E4E;
  font-size: 100px;
  border-radius: 50%;
}
<div text-center>
  <button ion-button class="btnAddImage">+</button>
</div>

My Goal is to have a circular button with a large plus sign in it.

Cheers, zuke

Upvotes: 2

Views: 189

Answers (2)

PDSSandeep
PDSSandeep

Reputation: 189

Try the following:

.text-center {
background: #000;
    width: 200px;
    height: 200px;
    color: #4E4E4E;
    display: table-cell;
    vertical-align: middle;
}
.btnAddImage{
    font-size: 50px;
    background: rgba(255,255,255, 0.3);
    width: 150px;
    height: 150px;
    color: #fff;
    border-radius: 50%;
}

Upvotes: 1

billy.farroll
billy.farroll

Reputation: 1921

This works, just change the class name:

.circle {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  background: rgba(255, 255, 255, 0.3);
  position: relative;
  border: 1px solid black;
}

.circle::after {
  content: " ";
  position: absolute;
  display: block;
  background-color: black;
  height: 5px;
  margin-top: -5px;
  top: 50%;
  left: 10px;
  right: 10px;
  z-index: 9;
}

.circle::before {
  content: " ";
  position: absolute;
  display: block;
  background-color: black;
  width: 5px;
  margin-left: -5px;
  left: 50%;
  top: 10px;
  bottom: 10px;
  z-index: 9;
}
<div class="circle"></div>

Upvotes: 1

Related Questions