Adding a call to action button minimal

  • Unknown's avatar
    susanrnet · Member ·

    Using my old theme Edin, on my Home Page http://susanrushton.net I styled the call to action button on the featured image as a button-minimal with help from the Blogging101 forum. I added the following on the text window of the edit page:

    Visit my blog

    Now I’ve changed to Sela theme this no longer works. I assume this theme doesn’t support button-minimal but I was hoping I could do this through CSS which I’m trialling.

    I already tried some code suggested in the forum but went red and it didn’t work – I think it’s because I don’t know how to target the particular link using CSS.

    Please can you explain if there’s any way to work again? I would appreciate it if you could make it as simple as possible – please don’t assume any knowledge of CSS.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    susanrnet · Member ·

    Sorry the code made a link. I’m removing the first < to stop it turning into a link.

    a class=”button-minimal” href=”http://susanrushton.net/blog/”>Visit my blog

  • Unknown's avatar
    shawnajroberts · Member ·

    Hello! Try adding this code to your CSS pane in the Customizer:

    .button-minimal {
padding: 6px 24px;
font-size: 0.875em;
line-height: 1.71429em;
display: inline-block;
padding: 10px 24px;
border: 2px solid #636363;
font-weight: bold;
text-transform: uppercase;
}

.button-minimal:hover {
	background: #e5eedc;
	color: #597645;
}

    I pulled some colors from the other areas of your site to make it fit in better than the blue of the Edin theme. You can change those however you like by changing the hex numbers.

    http://paletton.com/

    Let me know if I can help with anything else!

  • Unknown's avatar
    susanrnet · Member ·

    Thank you so much. It works perfectly. You’ve been so thoughtful – I love the hover over colour.

    I just knocked the border down from 2px to 1px – it’s such a wonderful tool – even though I know nothing, there’s still the odd thing I can do.

    Just one more question. Inline-block, solid, bold and uppercase have gone red in the CSS window. Is that a warning or just to help me find it if needed?

  • Unknown's avatar
    shawnajroberts · Member ·

    I’m glad you like it! The 1px border looks way better with your font. Good choice! :)

    Just one more question. Inline-block, solid, bold and uppercase have gone red in the CSS window. Is that a warning or just to help me find it if needed?

    This is just something code editors do. They highlight certain syntaxes to help you read what you’re working on. You’ll see the numbers are a dark green, and the hex colors are dark blue. Nothing to worry about. :)

  • Unknown's avatar
    susanrnet · Member ·

    Thanks for the reassurance, Shawna. I’m very happy – it really helps make it stand out.

  • Unknown's avatar
    shawnajroberts · Member ·

    :D Let me know if there’s anything else I can do to help!

  • The topic ‘Adding a call to action button minimal’ is closed to new replies.