CODEWITHSUNDEEP
cssresize
Reco Jhonatan
Reco Jhonatan

Reputation: 1623

how resize an element without modifying its content. css

I included in my project a new CSS library that included designs for buttons. I would like to change the height of this button: button

but when I use the high css property, the following happens: enter image description here enter image description here

after line-height propiety:

enter image description here

code:

<button class="btn btn-4 btn-4c icon-arrow-right" ><label>button</label></button>

source: source

how you could resize?

Thanks for the help!

Upvotes: 1

Views: 75

Answers (3)

Dilip Nayak
Dilip Nayak

Reputation: 303

Try using line-height property

Eg: line-height: 0.5

<button class="btn btn-4 btn-4c icon-arrow-right" style="line-height:5" ><label>button</label></button>

adjust line-height in this class too.

.btn-4:before {
position: absolute;
height: 100%;
font-size: 125%;
line-height: 6.5; //Adjust this
color: #fff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;

}

Upvotes: 1

ahe
ahe

Reputation: 21

here is the animated version :) https://jsfiddle.net/ahe128/evedzdbk/1/ your request is the following style code :) 

#button{
  width:200px;
  height:50px;
border-radius:5rem;
  background:#2390fd;
  margin:5%;
  position:absolute;
   display:table;
   transition:.5s;
}
span{
 font-size:15px;
  font-weight:600;
 display:table-cell;
  vertical-align:middle;
  text-align:center;
  color:white;
  font-family:sans-serif;
}

i hope this is useful for you :)

Upvotes: 1

KanUXD
KanUXD

Reputation: 707

We need more details like which CSS library are you using or CSS code of all those classes (btn btn-4 btn-4c icon-arrow-right) which are used on the button in order to help you out.

Upvotes: 0

Related Questions