Home>Support>How To Change The Button Color In Display Next/previous Post Navigation?

How To Change The Button Color In Display Next/previous Post Navigation?

By Petteri, 9 years ago. Last reply by Petteri, 9 years ago.

Hello!
I would like to have custom css-code to change the color of “Display next/previous post navigation” buttons which you can enable/disable in Theme settings.

I would like to adjust the link color and the button color; any css for this one.

Could you help me with this, please : )

NO url: I have a test site.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 2 months ago Magus
    Hi, I Work Here

    Hi Petteri

    This is the required code for those buttons, please copy it to your custom CSS and make any changes you need

    .post-navigation a:hover, #image-navigation a:hover {
        background: #ffffff;
        background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ebebeb), color-stop(1, #ffffff));
        background: -ms-linear-gradient(bottom, #ebebeb, #ffffff);
        background: -moz-linear-gradient(center bottom, #ebebeb 0%, #ffffff 100%);
        background: -o-linear-gradient(#ffffff, #ebebeb);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ebebeb', GradientType=0);
    }
    
    .post-navigation a, #image-navigation a {
        background: #ffffff;
        background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #dfdfdf), color-stop(1, #ffffff));
        background: -ms-linear-gradient(bottom, #dfdfdf, #ffffff);
        background: -moz-linear-gradient(center bottom, #dfdfdf 0%, #ffffff 100%);
        background: -o-linear-gradient(#ffffff, #dfdfdf);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf', GradientType=0);
        color: #646464;
    }
    

    If you need help getting the code for the gradient fill please try this site

    http://css3buttongenerator.com/

    Let us know how you get on

    Magus

  2. 9 years, 2 months ago Petteri

    Thanks, I think this works well
    – Petteri

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More