Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 17, 2018 at 5:29 am #942922
    ehdavies

    Some questions please:
    1. how do I change the font size of text in a button?
    2. how do I make the text bold in a button?
    3. how do I allow the text in a button to fill more of a line without wrapping, i.e. remove some of the padding that must be there at the moment?

    Thanks

    Huw

    April 18, 2018 at 4:23 am #943371
    Rikard

    Hey ehdavies,

    You can wrap the text of your button in a span for instance:

    <span style="font-size:20px; font-weight:bold;">Click me</span>

    I’m not sure I understand what you mean by #3, I would advise you to let the text flow naturally, otherwise you will likely have text overflowing outside of the button itself.

    Best regards,
    Rikard

    April 18, 2018 at 7:03 am #943443
    ehdavies

    Thanks Rikard. Sorry to be slow. Please can you tell me where I add this. Is it against the CSS class for the button?

    April 18, 2018 at 7:49 am #943478
    ehdavies

    Rikard. I’ve worked this out now and it I’ve put the span information in the button label.

    Please can you still look at the third point please. When the text wraps on the ‘Best all round’ and ‘Need to knows’ buttons, the wrapped text is only showing in the central third of the button!

    Thanks again

    Huw

    April 18, 2018 at 7:53 am #943480
    ehdavies

    …and also, when I look at the way the screen presents on smaller buttons the text does not wrap but expands not to wrap.

    So, to summarise, I’d like the buttons not to expand and for the text to not wrap – I think there should be enough space.

    Finally – and sorry for going on about this one. If I want smaller text to the buttons on mobiles how would I do this when the span information is entered in the button label itself?

    Thans

    Huw

    April 20, 2018 at 3:14 am #944380
    Ismael

    Hi,

    Thank you for the update. Decrease the default padding to create more space for the button text.

    .avia-button.avia-size-x-large {
    padding: 25px 20px 23px;
    font-size: 15px;
    min-width: 200px;
}

    Add css media queries if you want to adjust the style of the button on mobile view.

    // https://www.w3schools.com/css/css3_mediaqueries_ex.asp

    Best regards,
    Ismael

    April 20, 2018 at 12:04 pm #944540
    ehdavies

    That’s great thanks Ismael! I had to add important! after the padding stuff to make it work.

    Good to close

    Huw

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Button questions’ is closed to new replies.