Tagged: , , , , , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • February 17, 2021 at 1:38 pm #1281724
    Thedogscreative

    Hi Guys,

    What would be the easiest way of styling a button like the attached screenshot?

    button-styled-like-it's-at-the-end-of-a-divider

    So the link looks like it’s sat at the end of a divider, with the divider being in line with the centre of the letters?

    Ideally, it would be good if the length of the line would respond to the width of the column it’s in: for example, if it’s placed in a 1/2 column, it takes up that width in total (with the link at the end), and it’s it’s in a 1/4 column, it takes up that width in total, etc etc etc.

    I need to use this style in Grid Rows, too, just in case that makes any difference.

    If it’s easier to make this in a way that doesn’t use a ‘button’ per se, but has the link as a text box or whatever then I’m OK with that, I just need to get it looking right.

    Hopefully this makes sense. Thanks for your time.

    February 19, 2021 at 7:12 am #1282150
    Rikard

    Hey Thedogscreative,

    Thanks for the screenshot. Could you post a link to where we can see the element where you want to implement this as well please?

    Best regards,
    Rikard

    February 19, 2021 at 10:27 am #1282170
    Guenni007

    is it a manually set button – or you want the default read more link to like this?

    See here for elegant-blog style on : https://webers-testseite.de/excerpt/

    you had to adjust it to your selectors for your blog layout

    .html_elegant-blog .avia-content-slider .read-more-link {
  padding-bottom: 0;
  display: inline-table;
  height: auto;
  width: 100%;
}

.html_elegant-blog .avia-content-slider .read-more-link:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: calc(50% - 2px);
  width: 100%;
  border-bottom: 2px solid #999;
  z-index: -1
}

.html_elegant-blog .avia-content-slider .read-more-link:hover:before {
  border-color: #f29811 !important; /* take your hover color for it */
}

.html_elegant-blog .more-link {
  margin: 0;
  padding: 0 0 0 10px;
  text-align: right;
  font-family: Georgia !important;
  text-transform: uppercase !important;
  float: right;
  top: 0;
  width: auto;
  background-color: #fff;
}
    February 19, 2021 at 11:29 am #1282186
    Thedogscreative

    Hi, thanks for the replies.

    The page isn’t published yet and I haven’t added the section this button needs to be on – the screenshot is from the photoshop design file I’m working from.
    It’s a standard link, not a blog post. I see the confusion; It says ‘read more’ not because it’s a blog but because the section outlines one of the services the company offers and the link takes you to more info. But it looks like it might be possible with similar CSS?

    February 19, 2021 at 12:34 pm #1282195
    Guenni007

    see same example page on top: https://webers-testseite.de/excerpt/
    take an enfold button – light transparent and give to those buttons a custom class: button-liner

    .avia-button-wrap.button-liner {
    width: 100%;
    float: none !important;
    height: 100%;
    display: block;
    overflow: hidden !important;
}

.avia-button-wrap.button-liner:before {
	display: inline-block;
	content: "";
	position: relative !important;
	top: 8px;     /*depending on your setting - like font-size etc. */
	left: 0;
	width: calc(100% - 150px) !important;     /*you know best how long this had to be for your text */
	border-bottom: 2px solid #ccc;
}
    • This reply was modified 3 years, 2 months ago by Guenni007.
    February 19, 2021 at 2:31 pm #1282231
    Thedogscreative

    Amazing. Bit of tweaking and this worked really well. Thanks.

    February 20, 2021 at 11:22 am #1282398
    Victoria

    Hi Thedogscreative,

    Glad you got it working for you with Guenni007’s help! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.