Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 18, 2022 at 2:49 pm #1348699
    navindesigns

    Hi,
    On my site – http://balrajt9.sg-host.com/ – I would like to make all my buttons into a flip animation effect

    I am using this custom css

    .avia-button.avia-size-large, #top .avia-slideshow-button {
    font-size: 18px;
    text-transform: uppercase;
    color: #ed8b00 !important;
    background-color: #ffffff !important;
    font-family: ‘Montserrat’, Helvetica, sans-serif;
    border-radius: 10px;
    padding: 10px 30px 8px 30px;
    font-weight: 600;
    border:2px solid #ed8b00 !important;
    }
    .avia-button.avia-size-large:hover, .home #av_section_3 .avia-content-slider-inner .read-more-link a:hover {
    transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    color: #ffffff !important;
    border:2px solid #007ca5 !important;
    background-color: #007ca5 !important;
    text-decoration: none;
    }

    However, this does not do the flip effect?

    Example of flip effect – https://codepen.io/MoorLex/pen/NBwNZa or something similar

    The rollover color/treatment will remain the same, its just the animation needs to be changed to flip.

    April 19, 2022 at 10:09 am #1348745
    Ismael

    Hey navindesigns,

    Thank you for the inquiry.

    Have you tried adding the html manually in a text or code block? The flip effect relies on the back and front data attributes, which contain the link or button text. Unfortunately, there is no option to add data attributes to the button element.

    This is the html of the button with the flip effect.

    <a href="#" class="btn-flip" data-back="Back" data-front="Front"></a>

    You can add the css in the Quick CSS field.

    Best regards,
    Ismael

    April 19, 2022 at 2:41 pm #1348803
    navindesigns

    I did not want to use shortcodes for my button
    I just wanted to add an extra class for the animation

    Do you know what other animation effect I can use with just adding a class instead of using button shortcodes throughout the site?

    April 20, 2022 at 12:31 pm #1348928
    Guenni007

    see here the first row: https://consulting.webers-testseite.de/buttons/

    to have different colors than blue there is a custom-class for it: red, green, etc.
    to have that effect there is a custom class: btn-12
    And: The button color is set to light-transparent

    to have two different button lables i put in the Button Label Field: <span>Click!</span><span>Read More</span>

    
/****** Button 12 ***********/

#top .btn-12 .avia-button {
  position: relative;
  border:none;
  box-shadow: none !important;
}

#top .btn-12 .avia-button .avia_iconbox_title {
  display: block;
  position: absolute;
  height: 60px;
  width: 250px;
  -webkit-perspective: 650px;
  perspective: 650px;
}

#top .btn-12 .avia-button .avia_iconbox_title span {
  background: rgb(0,172,238);
  background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
  display: block;
  position: absolute;
  width: 250px;
  height: 60px;
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
    7px 7px 20px 0px rgba(0,0,0,.1),
    4px 4px 5px 0px rgba(0,0,0,.1);
  border-radius: 5px;
  margin:0;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

#top .btn-12.red .avia-button .avia_iconbox_title span {
    background: rgb(156, 39, 176);
    background:-moz-linear-gradient(180deg, rgba(244, 67, 54, 1) 0%, rgba(156, 39, 176, 1) 100%); 
    background:-webkit-linear-gradient(180deg, rgba(244, 67, 54, 1) 0%, rgba(156, 39, 176, 1) 100%);
    background:linear-gradient(180deg, rgba(244, 67, 54, 1) 0%, rgba(156, 39, 176, 1) 100%);
}

#top .btn-12.green .avia-button .avia_iconbox_title span {
    background: #00CF30;
    background: -webkit-linear-gradient(to bottom, #00CF30 0%, #009C24 100%);
    background: -moz-linear-gradient(to bottom, #00CF30 0%, #009C24 100%);
    background: linear-gradient(to bottom, #00CF30 0%, #009C24 100%);
}

#top .btn-12 .avia-button .avia_iconbox_title span:nth-child(1) {
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: 50% 50% -30px;
  -moz-transform-origin: 50% 50% -30px;
  transform-origin: 50% 50% -30px;
}

#top .btn-12 .avia-button .avia_iconbox_title span:nth-child(2) {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-transform-origin: 50% 50% -30px;
  -moz-transform-origin: 50% 50% -30px;
  transform-origin: 50% 50% -30px;
}

#top .btn-12 .avia-button:hover .avia_iconbox_title span:nth-child(1) {
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
    7px 7px 20px 0px rgba(0,0,0,.1),
    4px 4px 5px 0px rgba(0,0,0,.1);
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
}

#top .btn-12 .avia-button:hover .avia_iconbox_title span:nth-child(2) {
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
    7px 7px 20px 0px rgba(0,0,0,.1),
    4px 4px 5px 0px rgba(0,0,0,.1);
  color: transparent;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}
    April 20, 2022 at 1:23 pm #1348932
    Guenni007

    transfering your codepen link to enfold buttons:

    1) give a custom-class to your button: flip-button
    2) this to the Label Input Field: <span class="back">Click!</span><span class="front">Read More</span>
    ( you can change the content to what you like to have as label for the button )
    3) this to child-theme functions.php:

    function set_data_attribute_for_flip_buttons(){
?>
<script type="text/javascript">
(function($) {
$(document).ready(function(){    
    $('.avia-button-wrap.flip-button').each( function() {
      $(this).find('.avia-button').addClass('btn-flip');
      var frontLabel = $(this).find('.front').html();
      var backLabel = $(this).find('.back').html();
      $(this).find('.avia-button').attr('data-front', frontLabel).attr('data-back', backLabel);
      $(this).find('.label').css('display', 'none');
    });
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'set_data_attribute_for_flip_buttons');

    4) this to quick css:

    body div .avia-button.btn-flip {
  padding: 0px; 
  margin: 0px; 
  opacity: 1;
  outline: 0;
  color: #fff;
  line-height: 40px !important;
  position: relative;
  text-align: center;
  letter-spacing: 1px;
  display: inline-block;
  text-decoration: none;
  font-family: "Open Sans";
  text-transform: uppercase;
}

body div .avia-button.btn-flip:hover:after {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}

body div .avia-button.btn-flip:hover:before {
  opacity: 0;
  transform: translateY(50%) rotateX(90deg);
}

body div .avia-button.btn-flip:after {
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  color: #323237;
  display: block;
  transition: 0.5s;
  position: absolute;
  background: #adadaf;
  content: attr(data-back);
  transform: translateY(-50%) rotateX(90deg);
}

body div .avia-button.btn-flip:before {
  top: 0;
  left: 0;
  opacity: 1;
  color: #adadaf;
  display: block;
  padding: 0 ;
  line-height: 40px;
  transition: 0.5s;
  position: relative;
  background: #323237;
  content: attr(data-front);
  transform: translateY(0) rotateX(0);
}
    April 23, 2022 at 12:37 pm #1349210
    Mike

    Hi,
    Guenni007 thank you for sharing this solution. Navindesigns were you able to implement this?

    Best regards,
    Mike

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