CSS – Animate | iSonic.io

a.uk-button-default {
    position: relative;
}


.uk-section-primary:not(.uk-preserve-color)  .uk-button-default:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    width: 80px;
    background-image: url(/wp-content/icons/arrow-white.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 20px) 50%;
    transition: background-position .2s ease-out;
}


.uk-section-primary:not(.uk-preserve-color) .uk-button-default:hover::before {
    background-image: url("/wp-content/icons/arrow-white.svg");
    background-position: 100% 50%;
}


.uk-button-default:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    width: 80px;
    background-image: url(/wp-content/icons/arrow-green.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 20px) 50%;
    transition: background-position .2s ease-out;
}


.uk-button-default:hover::before {
    background-image: url("/wp-content/icons/arrow-white.svg");
    background-position: 100% 50%;
}

.uk-button-default:active::before {
    background-image: url("/wp-content/icons/arrow-green.svg");
    background-position: 100% 50%;
}

.uk-button-default {
    padding-right: 100px;
    transition: 0.3s;
}

.uk-button-default:hover {
    padding-left: 40px;
    transition: 0.4s;
    padding-right: 110px;
}

Used on Pro Mini Bikes website.

Adding Colour Dropdowns to Product Variations

Written by isoadmin on 13 September 2022. Posted in CSS, jQuery. No Comments on Adding Colour Dropdowns to Product Variations

Create colourchart.css file.

.select2-selection__rendered {
    line-height: 41px !important;
}

.select2-container .select2-selection--single {
    height: 45px !important;
}

.select2-selection__arrow {
    height: 44px !important;
}

[id*="classic-pearl-white-gloss"] {
	background:  #F5F7F4;
	color: #000;
}

[id*="anotec-silver-grey-matte"] {
	background:  #B7B8BA;
	color: #000;
}

Add code to custom.css file to connect the new colourchart.css file.

@import url("colourchart.css"); /* Colour Chart Colours for Dropdown */

Add custom.js file.

jQuery( document ).ready(function($) {


    $( "#pa_colour option" ).each(function( index ) {
        $(this).addClass($(this).val());
    })

     $('#pa_colour').select2({
        
     });


});

Infinite Scrolling Block Text

Written by isoadmin on 25 August 2022. Posted in CSS. No Comments on Infinite Scrolling Block Text

HTML

<div class="scroll-container">
  <div class="scroll-text"><span class="wt-btn_sign-bound"><span data-width="#fff" data-text="BVLOS HUB"> BVLOS HUB</span></span></div>
</div>

CSS

.scroll-container {
    overflow: hidden;
    width: max-content;
    position: absolute;
    z-index: 0;
    margin-top: -200px;
}

.scroll-container::before {
    background: linear-gradient(270deg,transparent , black );
    width: 16%;
    height: 100%;
    content: "";
    top: 0px;
    left: 0px;
    position: absolute;
    z-index: 1;
}

.scroll-container::after {
    background: linear-gradient(90deg,transparent , black );
    width: 16%;
    height: 100%;
    content: "";
    top: 0px;
    right: 0px;
    position: absolute;
}

.wt-btn_sign-bound {
    display: block;
    overflow: hidden;
    width: 100%;
}

.wt-btn_sign-bound span {
    position: relative;
    display: inline-block;
    padding: 0 21px;
    -webkit-animation: wt-btn_sign-marquee 120s linear infinite;
    -moz-animation: wt-btn_sign-marquee 120s linear infinite;
    -o-animation: wt-btn_sign-marquee 120s linear infinite;
    animation: wt-btn_sign-marquee 120s linear infinite;
}

.wt-btn_sign-bound span:after {
    content: attr(data-text);
    position: absolute;
    left: 100%;
    padding: 0 21px;
}