Modify custom CSS button in sela theme

ashrouten · Member · Jul 6, 2017 at 4:00 pm
Copy link

Add topic to favorites
Hi,

I have added a custom button with white text to the page: https://ashrouten.com/writing

I have also added a button to a footer widget on the home page, but the white text is automatically changed to grey. Can anyone help me change this to white text?

Many thanks

The blog I need help with is: (visible only to logged in users)
wynternet · Staff · Jul 6, 2017 at 4:04 pm
Copy link
Hi ashrouten,

Please try:
```
a.button {
    color: #fff;
}
```
Let me know if that works for you.

I hope this helps!
wynternet · Staff · Jul 6, 2017 at 4:08 pm
Copy link
Hello again,

I would like to mention, to add this please go into Customize -> CSS -> Paste CSS Code -> Save & Publish

Keep in mind, you will need either the Premium or Business Plan to edit the CSS.

I hope this helps!
ashrouten · Member · Jul 6, 2017 at 4:15 pm
Copy link
Perfect, works a treat wynternet, thank you!

Are graduated colour buttons possible to create in CSS too?
wynternet · Staff · Jul 6, 2017 at 4:59 pm
Copy link
Hello ashrouten!

You’re welcome! Happy to help.

Are you referring to a Gradient button? If you have something else in mind, please let me know.

Otherwise, I have been playing around with this a bit and came up with the following solution. Try replacing what I previously provided with this:
```
a.button {
    color: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#76aee8), to(#003366));
}
```
This seems to add a gradient to your button. Feel free to play around with the color values (#76aee8 & #003366).

Additionally, since this was my first gradient button if you would like a member of staff to take a look and provide further insight, tag this post with modlook. There are some CSS experts (paging @thesacredpath) out there who will certainly be able to help. Here is some info on how to get a someone from staff to view your question.

In any case, I hope this is somewhat helpful!
ashrouten · Member · Jul 6, 2017 at 6:03 pm
Copy link
Perfect, thanks again wynternet, just what I wanted and works a treat!
wynternet · Staff · Jul 6, 2017 at 6:09 pm
Copy link
Awesome! You’re welcome. I am very glad that will work for you.
ashrouten · Member · Jul 6, 2017 at 9:18 pm
Copy link
If I may also ask, I am trying to replicate the green and blue buttons on the following site which have a small shadow/dark border:

Home

See my attempt here:

https://ashrouten.com/expeditions/siberia-2018/

Can’t seem to be able to get the border/shadow. Any ideas?

No items found.