CODEWITHSUNDEEP
htmlcssangularjssassionic2
LeRoy
LeRoy

Reputation: 4436

how to have smaller buttons css

this is a more css question than ionic2.

I would like to make all the buttons smaller using css. Here is a Plunker example. If possible can it be responsive ? resizing according to .ion-content

enter image description here

Its based of segment-button

.segment-button {
    border-style: none;
    border-color: #e62100;
    color: #e62100;
    border-width: thin;
    font-size: 12px;
}

Upvotes: 3

Views: 5428

Answers (2)

Rafael RN
Rafael RN

Reputation: 176

You just need to change the width and height (and max-width/max-height, and adjust the line-height) of your code in style.css, changing .segment-button: first-of-type, .segment-button:not(:first-of-type), .segment-button:last-of-type, .md .segment-button.

Something like this:

.md .segment-button {
  border-style: none;
  border-color: #e62100;
  color: #e62100;
  border-width: thin;
  font-size: 12px;
}

.segment-button:first-of-type {
  width: 40px;
  height: 38px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 40px;
  max-width: 40px;
  max-height: 40px;
}

.segment-button:not(:first-of-type) {
  width: 40px;
  height: 38px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 40px;
  max-width: 40px;
  max-height: 40px;
}

.segment-button:last-of-type {
  width: 40px;
  height: 38px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 40px;
  max-width: 40px;
  max-height: 40px;
}

Upvotes: 4

Keith
Keith

Reputation: 4147

Add this in your css to overwrite:

.segment-button:not(:first-of-type) {
   max-width: 30px;
   line-height: 30px;
   height:30px;
}

Upvotes: 0

Related Questions