Button styling customisation - Support | Kriesi.at

Tagged: Buttons, styling

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts

January 12, 2023 at 11:31 pm #1378500

THP Studio

Participant

Hey guys,

Got a client who wants some very specific button styles that aren’t out of the box with Enfold and wondered if you could let me know if this is possible and point me in the right direction with CSS needed to accomplish it.

Note that the buttons have inverted styling when next to each other like in the example (probably using a Button Row element)

See private field for a screenshot of the styling.

Thanks,

Tim

This topic was modified 1 year, 11 months ago by THP Studio.
This topic was modified 1 year, 11 months ago by THP Studio.

January 13, 2023 at 2:15 pm #1378585

Mike

Moderator

Hey Tim,
Can you link to a working example of this button so we can examine it without having to write the whole thing from scratch?

Best regards,
Mike

January 13, 2023 at 5:58 pm #1378632

THP Studio

Participant

Hey Mike,

Great idea, posted in private field.

Thanks for the help, much appreciated.

Tim

January 14, 2023 at 12:36 am #1378657

Guenni007

Participant

here are some customizations on enfold Buttons: https://enfold.webers-webdesign.de/buttons/

______________

btw: for better selecting Buttons in a button-row i had written that little snippet to have unique ID’s on each Button:

function id_to_button_row_buttons(){
?>
<script>
(function($) {
  $('.avia-buttonrow-wrap').each(function(a){
    var ButtonRowID = ($(this).attr('id') !== undefined) ? $(this).attr('id') : 'button_row'+(a+1);
    var that = this;
    $('.avia-button', this).each(function(i){
      $(this).attr('id', ButtonRowID+'-button'+(i+1));
    });
  });
})(jQuery);
</script>
<?php
}
add_action( 'wp_footer', 'id_to_button_row_buttons');

you can see here in the DOM how it works ( first button row has no custom class – second got abc as custom-class.)
https://webers-testseite.de/buttonrow/

January 14, 2023 at 3:00 pm #1378676

Mike

Moderator

Hi,
Thanks for the link to the example, these buttons have multiple divs in them to create the skew so we would not be able to style one of our buttons to match this, but you could add these buttons to your page in a Code Block element, on my example page I added the button code and the css in the same Code Block element:

try this code:

<style>
  .home-section-cta-wrap {
      position: relative;
      z-index: 100;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin-top: 24px;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
  }
  
  .main_color .home-section-cta-wrap a {
    color: #fff !important;
  }
  .skewed-button {
      position: relative;
      width: 180px;
      padding: 10px 60px 10px 32px;
      -webkit-transition: width 0.2s ease;
      transition: width 0.2s ease;
      font-weight: 500;
      text-align: center;
      text-decoration: none;
  }
  .skewed-button-bg {
      position: absolute;
      left: 0;
      top: 0;
      right: 32px;
      bottom: 0;
      z-index: -1;
      border-style: solid none solid solid;
      border-width: 1px;
      border-color: #e0e0e0;
      border-top-left-radius: 1px;
      border-bottom-left-radius: 1px;
      border-bottom-right-radius: 1px;
  }
  .button-skew {
      position: absolute;
      left: auto;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
      width: 50%;
      margin-top: -1px;
      margin-right: -18px;
      margin-bottom: -1px;
      border-top: 1px solid #000;
      border-right: 2px solid #000;
      border-radius: 0 2px 1px 1px;
      -webkit-transform: skew(-45deg, 0deg);
      -ms-transform: skew(-45deg, 0deg);
      transform: skew(-45deg, 0deg);
  }
  .skewed-button.skewed-button--right {
      margin-left: -12px;
      padding-right: 32px;
      padding-left: 60px;
  }
  .skewed-button-bg.skewed-button--right.cc-pink {
      border-style: solid;
      border-color: #ff6180;
      background-color: #ff6180;
  }
  .skewed-button-bg.skewed-button--right {
      left: 32px;
      right: 0;
      border-top-right-radius: 1px;
      border-bottom-left-radius: 0;
  }
  .button-skew.button-skew--right {
      left: 0;
      right: auto;
      margin-right: 0;
      margin-left: -22px;
      border-style: none none solid solid;
      border-bottom-width: 1px;
      border-left-width: 2px;
      border-radius: 1px 0 0 2px;
  }
  .button-skew {
      background-color: inherit;
      border-color: inherit !important;
  }
  .skewed-button:hover {
      width: 200px;
  }
  </style>
  
  <div class="home-section-cta-wrap">
  <a href="#" class="w-inline-block skewed-button">
    <div class="skewed-button-bg">
      <div class="button-skew"></div>
    </div>
    <div>Learn more</div>
  </a>
  <a href="#" class="skewed-button skewed-button--right cc-white-text w-inline-block">
    <div class="skewed-button-bg skewed-button--right cc-pink">
      <div class="button-skew button-skew--right"></div>
    </div>
    <div>Buy now</div>
  </a>
  </div>

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
I hope this helps.

Best regards,
Mike

January 14, 2023 at 4:05 pm #1378680

Guenni007

Participant

here is the kriesi double button: https://webers-testseite.de/doublebutton/

this is the html code for it:

<div class="avia-double-buttons ">
	<a href="https://link1" class="avia-double-button avia-double-button-1">Text1</a>
	<span class="button_or">or</span>
	<a href="https://link2" class="avia-double-button avia-double-button-2">Text2</a>
</div>

this was the original css for it:

.avia-double-buttons {
 margin-top:30px;
 text-align:center;
 position:relative
}
#top .avia-double-button {
 letter-spacing:1px;
 padding:13px 20px;
 text-transform:uppercase;
 font-size:13px;
 text-align:center;
 min-width:175px;
 display:inline-block;
 transition:all 0.4s ease-in-out;
 -moz-transition:all 0.4s ease-in-out;
 -webkit-transition:all 0.4s ease-in-out;
 -o-transition:all 0.4s ease-in-out;
 border:4px solid #fff;
 text-decoration:none
}
#top .av_one_half .avia-double-button {
 min-width:158px
}
#top .avia-double-button:hover {
 text-decoration:none
}
#top .avia-double-button-1 {
 border-top-left-radius:100px;
 border-bottom-left-radius:100px;
 border-right-width:2px
}
#top .avia-double-button-2 {
 border-top-right-radius:100px;
 border-bottom-right-radius:100px;
 border-left:none
}
#top .button_or {
 position:absolute;
 display:block;
 height:26px;
 line-height:21px;
 width:26px;
 text-align:center;
 top:50%;
 left:50%;
 margin:-13px 0 0 -14px;
 background:#fff;
 color:#666;
 border-radius:100px;
 font-size:10px;
 border:2px solid #FFF;
 font-style:italic;
 font-weight:600;
 z-index:11
}
#top #wrap_all .avia-slide-wrap .avia-double-button,
#top #wrap_all .avia-hover-fx .avia-double-button {
 background:#000;
 background:rgba(0,0,0,0.2);
 border-color:#fff;
 color:#fff;
 padding-bottom:11px;
 text-decoration:none
}
#top #wrap_all .avia-slide-wrap .avia-double-button:hover,
#top #wrap_all .avia-hover-fx .avia-double-button:hover {
 opacity:0.8
}
#top .avia_textblock .avia-double-buttons {
 margin-top:35px
}
#top .avia_textblock .avia-double-button {
 border-width:1px;
 font-weight:600
}
#top .avia_textblock .button_or {
 border-color:#e1e1e1;
 border-width:1px;
 line-height:22px
}
#top .avia-social-buttons {
 display:block;
 clear:both;
 position:relative;
 padding:8px;
 border-radius:50px;
 background:#fcfcfc;
 margin-bottom:-47px;
 margin-left:auto;
 top:21px;
 text-align:center;
 margin-right:auto;
 width:468px;
 box-shadow:0 -1px 2px rgb(255,255,255),inset 0 1px 2px rgba(0,0,0,.2),inset 0 .25rem 1rem rgba(0,0,0,.1)
}

January 14, 2023 at 5:33 pm #1378689

Mike

Moderator

Hi,
Thanks for sharing Guenni007, this looks nice, but the main goal of THP Studio is to achieve a skewed border between the two buttons like in this example

do you have any ideas to achieve this?