CSS: Link Box

  • Author
    Posts
  • #2538329

    Dear all,

    How can we change the color of the link box in the banner on homepage: http://ledergerber-partner.ch?

    What’s the HTML code to use the same link box as we have it in this banner for other pages of our website? (same seen on other pages from other e.g. http://apricotconsulting.us/our-services/corporate-social-responsibility)

    Thanks,
    Raphael

    The blog I need help with is ledergerber-partner.ch.

    #2538569

    raulanton
    Staff

    Howdy!

    I assume you mean ‘mehr über uns >’ link. If so, you have two colors, the one when your mouse pointer is on it and the color in other case. First, the last. You can change this link box color, with this code in which you can alter values for background and color (this is the text color):

    #hero .hentry .entry-content a.button {
    color: #ffffff;
    background: #ff0000;
    }

    And you would need to change the selector to apply your new colors to the link on hover.

    #hero .hentry a.button:hover {
    background: #00ff00;
    color: #0000ff;
    }

    Of course, I am using arbitrary colors just to show the effect. You can use a tool to convert your preferred color to HEX values, for instance this.

    What’s the HTML code to use the same link box as we have it in this banner for other pages of our website?

    Well, for instance “zurück >” in your page http://ledergerber-partner.ch/angebot/unternehmensstrategie/?

    In this case you could use once adapted to your preferred colors, this code. Take into account, this will apply to each link inside the content of an entry (post/page):

    .entry-content a {
    display: inline-block;
    color: #ff0000;
    border: 1px #00ff00 solid;
    padding: 5px 10px;
    border-radius: 2px;
    background: #0000ff;
    }

    #2538576

    Hi Raulanton,

    Thanks for this information. It works.

    Using the code…

    #hero .hentry .entry-content a.button {
    color: #ffffff;
    background: #ff0000;
    }

    …now the link box text have a shade. How to remove that?

    Best regards,
    Raphael

    #2538579

    raulanton
    Staff

    Hi again, Raphael.

    I think you mean the text shadow in links as “mehr über uns >” . If so:

    #hero .hentry {
        text-shadow: none;
    }

    If not, please, tell me which one do you mean?

    #2538580

    Hi Raulanton,

    Yes, that’s it!
    Thank you so much for your very appreciated help!

    Best regards,
    Raphael

    #2538583

    raulanton
    Staff

    Hi!

    Glad to be of help! :)

The topic ‘CSS: Link Box’ is closed to new replies.