"Load More" button

Hello,
How do i Change the Colors in The Basel theme of this Button?

I tried with this: In Global CSS

body .basel-load-more {
    padding-top: 12px;
    padding-right: 25px;
    padding-bottom: 12px;
    padding-left: 25px;
    border-color: #c19a5c;
    color: #c19a5c;
    font-weight: 900;
    border-width: 2px;
}
body .basel-load-more:hover {
    padding-top: 12px;
    padding-right: 25px;
    padding-bottom: 12px;
    padding-left: 25px;
    border-color: #c19a5c;
    color: #ddaf65;
    font-weight: 900;
    border-width: 2px;
	  background:yellow;
}

( https://d.pr/i/6nw39e ) <<– This Button

Greetings

Hello,

I have viewed a few pages on your site and do not see this button on the site, please provide page URL. where I can see it.

Here is the code for Load more button in the shop page:

body .products-footer .basel-products-load-more {
    border-color: red;
    border-width: 2px;
    font-weight: 600;
    background-color: transparent;
    color: red;
}

body .products-footer .basel-products-load-more:hover {
    border-color: red;
    border-width: 2px;
    font-weight: 600;
    background-color: red;
    color: white;
}

Best Regards

Hello,

here u can find it, on the Bottom. On The Link in Private!

It´s the only page with most Products.

Thx i will Try it!

Okay The CSS works great!

And the Color for the “Spinner”? How to Change it?
On Hover it is White that´s okay.

Greetings.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.products-footer .basel-products-load-more:after{
border: 1px solid #000;
}

Best Regards

Thank u, but it does nothing 😉
I want change The Color of the Little Spinner in the Button.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.product-footer .basel-products-load-more:after{
border:1px solid red;
}

Best Regards

hey THX.
But it won´t work anyway..

i tried this for the “Blog” site, but it won´t work, a solution for this?

body .blog-footer .basel-blog-load-more {
    border-color: black;
    border-width: 2px;
    font-weight: 600;
    background-color: transparent;
    color: #c19a5c;
}

body .blog-footer .basel-blog-load-more:hover {
    border-color: black;
    border-width: 2px;
    font-weight: 600;
    background-color: #c19a5c;
    color: white;
}

Hello,

Please delete the previous code and add this one both for the product page and for the blog:

.products-footer .basel-products-load-more:after,
.products-footer .basel-products-load-more:hover:after,
.products-footer .basel-products-load-more:focus:after,
.blog-footer .basel-blog-load-more:after,
.blog-footer .basel-blog-load-more:hover:after,
.blog-footer .basel-blog-load-more:focus:after {
  border-color: red;
}

Change the color as per your needs.

https://gyazo.com/e47a785e31d872ab6bc8ab0656a616b6

Best Regards

Thank U! Very much!

Now the CSS works 🙂

and another question, the Button on the Blog Page is after the first klick “Black” how to handle with it? (see video https://d.pr/v/uJNdU8 )

.products-footer .basel-products-load-more:after,
.products-footer .basel-products-load-more:focus:after,
.blog-footer .basel-blog-load-more:after,
.blog-footer .basel-blog-load-more:focus:after {
  border-color: #c19a5c;
}
body .products-footer .basel-products-load-more,
			.blog-footer .basel-blog-load-more{
    border-color: black;
    border-width: 2px;
    font-weight: 600;
    background-color: transparent;
    color: #c19a5c;
}

body .products-footer .basel-products-load-more:hover,
		 .blog-footer .basel-blog-load-more:hover{
    border-color: black;
    border-width: 2px;
    font-weight: 600;
    background-color: #c19a5c;
    color: white;
}

.products-footer .basel-products-load-more:hover:after,
.blog-footer .basel-blog-load-more:hover:after{
  border-color: white;
}

i modified the code for my design.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .blog-footer .basel-blog-load-more:focus{
	  background-color: red;
    border-color: red;
    color: #fff;
}
.products-footer .basel-products-load-more:focus {
	  background-color: red;
    border-color: red;
    color: #fff;
}

Set the color as per your needs.

Best Regards

NICE!
Big THX 🙂

U can Close this 😀

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts