Viewing 29 posts - 1 through 29 (of 29 total)
  • Author
    Posts
  • November 18, 2020 at 6:27 pm #1261347
    Talker77

    Hello, I would like to have a 10px white border on the left and right of the button … how does that work?

    November 18, 2020 at 8:55 pm #1261363
    Guenni007

    on most css rules concerning to an orientation the rules goes from top, right , bottom, left ( clockwise)
    so you can have f.e:

    
.avia-button {
  border:  solid #FFF !important;
  border-width: 0 10px 0 5px !important
}

    if you have top/bottom and right/left the same value you can shorten it to:

    .avia-button {
  border:  solid #FFF !important;
  border-width: 0 10px  !important
}

    on border-radius it is again clockwise but you start at upper-left corner
    f.e.:

    
.avia-button {
  border-radius: 5px 10px 20px 30px !important
}

    To give better advice, it would be good to see the corresponding page. Maybe a custom class for these buttons is then the best solution.

    November 19, 2020 at 12:40 pm #1261522
    Rikard

    Hi,

    Thanks for helping out @guenni007, did that answer your question @talker77? If not then please post a link to where we can see the actual element on your site.

    Best regards,
    Rikard

    • This reply was modified 4 years, 1 month ago by Rikard.
    November 24, 2020 at 1:08 pm #1262640
    Talker77

    Hello, I have a question about the buttons. Since I needed a white background for some buttons on the left and right, I used padding to set spaces … that works too.
    But I don’t need that for other buttons, so left and right a white space (see screenshot) … how can I change that for individual buttons?

    November 24, 2020 at 4:16 pm #1262730
    Yigit

    Hi,

    Please edit your Button element and go to Advanced > Developer Settings and then give your button a custom CSS class (“custom-button” in example below) and then use the code as following one 

    .custom-button .avia-button {
  border:  solid #FFF !important;
  border-width: 0 10px  !important
}

    Cheers!
    Yigit

    December 2, 2020 at 6:31 pm #1264554
    Talker77

    Hello, it doesn´t work…I have left and right white border. I want it wothout border…

    December 3, 2020 at 10:24 am #1264707
    Rikard

    Hi,

    Thanks for the update. If you don’t want a border then please remove this from the CSS which Yigit posted:

      border:  solid #FFF !important;
  border-width: 0 10px  !important

    If you need further help then please try to explain your intentions a bit further, or post a screenshot highlighting what you would like to achieve.

    Best regards,
    Rikard

    December 3, 2020 at 10:33 am #1264709
    Talker77

    For a better understanding … I would like to have 2 different buttons.
    1. A button with white space on the left and right.
    2. A button without this white space.

    1. I currently already have … but how can I assign the properties of 2. to other buttons?

    December 4, 2020 at 4:43 am #1264924
    Rikard

    Hi,

    Thanks for the update. The CSS Yigit posted added a white border to your button, if that is not what you want then I don’t understand what you mean by “white space”. Do you have a mockup or similar to clarify your intentions?

    Best regards,
    Rikard

    December 4, 2020 at 3:28 pm #1265028
    Talker77

    So … I want 2 different buttons!

    1. Button – with white space left and right … this button works! These buttons do not have a custom CSS class.

    2nd button – WITHOUT white space … I don’t have this button yet! Which custom CSS class do I need there? Look at the screenshot please…
    Second link is site URL

    December 6, 2020 at 6:34 am #1265237
    Rikard

    Hi,

    Thanks for the update. So you want to remove the white parts of the button, correct? If so then simply remove the CSS which Yigit sent you.

    Best regards,
    Rikard

    December 7, 2020 at 10:29 am #1265431
    Talker77

    Hello, the “problem” is that if I don’t assign a CSS ID, the left and right is the white space … I have:

    .custom-button .avia-button {
    border: solid #FFF !important;
    border-width: 0 15px !important
    z-index: 2;
    z-index: 2;
    float: none !important;
    top: -68px !important;
    font-weight: 700;
    }

    .avia-button{
    border: solid #fff !important;
    border-width: 0 10px 0 10px !important
    }

    How do I manage to define an ID using CSS and assign it to the corresponding buttons, without the space left and right?

    December 8, 2020 at 5:12 am #1265678
    Rikard

    Hi,

    Thanks for the update. This CSS is adding the border:

    .avia-button{
border: solid #fff !important;
border-width: 0 10px 0 10px !important
}

    Please remove it.

    Best regards,
    Rikard

    December 8, 2020 at 9:46 am #1265706
    Talker77

    Hello, as I wrote above, I need 2 different buttons …

    1. Button with white border … that works with:

    .avia-button {
    border: solid #fff! important;
    border-width: 0 10px 0 10px! important
    }

    2. Button (see screenshot) … I don’t want a white border there. No CSS class is currently assigned to this button. What content must a CSS class have so that a white border is not assigned to this button?

    December 9, 2020 at 4:07 am #1265913
    Rikard

    Hi,

    If you use this CSS then it will apply to all buttons:

    .avia-button {
border: 2px solid white;
}

    If you use this, then it will only apply to buttons where you have added a custom class:

    .custom-button .avia-button {
border: 2px solid red;
}

    In this case the class is called custom-button.

    If you need a second custom button, then add a different class name:

    .second-button .avia-button {
border: 2px solid blue;
}

    Best regards,
    Rikard

    December 9, 2020 at 10:41 am #1265953
    Talker77

    Hello we have it! :-)
    Super thank you!!!

    On another page I still have the problem that the button is too high, see screenshot. How do I get it down further?

    December 10, 2020 at 6:44 am #1266189
    Rikard

    Hi,

    Thanks for the update. Please try this CSS as well:

    div.aviabuttonhigh {
  margin-top: 20px;
}

    Best regards,
    Rikard

    December 10, 2020 at 2:43 pm #1266298
    Talker77

    Hello, the button is inside the layout element … if I have margin: 20px; the layout element is enlarged.

    December 10, 2020 at 6:43 pm #1266348
    Talker77

    Hello, I may have misrepresented how I want it to be. The heading should slide down as far as you can see on the screenshot.

    December 11, 2020 at 9:11 am #1266480
    Rikard

    Hi,

    Please try this instead:

    div.aviabuttonhigh {
    margin-top: 20px;
    margin-bottom: -50px;
}

    Best regards,
    Rikard

    December 11, 2020 at 11:40 am #1266508
    Talker77

    Hello, I tried it, but it doesn’t work.

    December 12, 2020 at 5:51 am #1266728
    Rikard

    Hi,

    Try this instead:

    div.aviabuttonhigh {
    margin-top: 20px;
    margin-bottom: -50px !important;
}

    Best regards,
    Rikard

    December 12, 2020 at 5:47 pm #1266787
    Talker77

    Thank you, we are one step further! :-)
    How do I get it that there is a limit around the button?
    The distance between the button and the gray border is too big, see screenshot.
    I’ve already tried:

    background-color: white;
    padding: 0 15px 0 15px !important;

    and

    border: 10px solid #FFF !important;

    But without success.

    December 14, 2020 at 5:56 am #1267026
    Rikard

    Hi,

    Thanks for the update. I’m not sure exactly what you are looking to achieve, but it looks like you applied a background the button container. If you don’t want the white space between the button and the border, then please remove that.

    background-color: white;

    Best regards,
    Rikard

    December 14, 2020 at 8:47 am #1267038
    Talker77

    Hello Rikard,
    I removed the backround…my goal is to have it like on the screenshot …

    December 15, 2020 at 5:40 am #1267361
    Rikard

    Hi,

    Thanks for the screenshot. Please try this CSS as well:

    .aviabuttonhigh {
    background: #fff;
    width: 85%;
    display: table;
    margin: 0 auto;
}

    Best regards,
    Rikard

    December 15, 2020 at 10:29 am #1267411
    Talker77

    Hello, it was partially successful … not further down the page for the buttons (see screenshot) … is that due to the setting width: 85% ?

    December 16, 2020 at 4:56 am #1267660
    Rikard

    Hi,

    Yes that is likely due the 85% argument, you can try to set a custom pixel value instead to see if that works better:

    width: 150px;

    You could also assign a different class to the button button, if you want that to look different.

    Best regards,
    Rikard

    December 16, 2020 at 1:33 pm #1267820
    Talker77

    I found a solution, thanks! :-)

  • Author
    Posts
Viewing 29 posts - 1 through 29 (of 29 total)
  • The topic ‘button border left right’ is closed to new replies.