Button coloring with a imaged background
It's proving quite difficult to find the right color to make this not look out of place/tacky..
I think perhaps the image has too much going on around the center, so it's causing a bit of a clash of colors, and the button may not be ideal for accessibility purposes.
If anyone has any ideas on either a better way to display the button, or a better way to deal with the image background, that'd be much appreciated 🙂
35 Replies
another option: this color is used for the underline when hovering over the navbar links
Box shadow? More contrast?
it's hard to judge this because I assume you will be adding more content than just a button, but if not, you rarely want your bg element to take up 95% of the total
but if it will be only a button, then I would make it quite a bit larger
and if you do want the bg to be the majority of the image, then maybe put the button somewhere in the white space on the right side instead of the center
but really, add some text, it will help the balance and people will then know why they should push that button 🙂
here is an example from one of my pages, where I attempted to work around a very difficult bg image for instance
And what about mobile where the button placed like this would be... tiny? In my cook a CTA needs to stand out and, well, call to action.
when you transition to mobile layout, the image becomes square and the button much larger relative to the image size
and on mobile, generally speaking, you don't want tiny buttons, because ppl have fat fingers
so I typically make them at least 30% of the screen width, but usually 100% just so people can use the phone from either hand with the same experience
but in this image case, it doesn't really work so I didn't do that here
It’s not awful on mobile, but it doesn’t look as bad as desktop view
So basically visual contrast as is my point above. 😄 / Like the deskop idea, tho ... although it basica;ly only caters for images with a free corner and if changed, the button would need to be rearranged (therefore I prefer a fits-all-possibilities solution).
Honestly was just going to have the image and button. I spent a while finding an image and kinda semi gave up and settled for this lol.
More padding. more contrast text/background, more border.
Ideally would need an image that has some white space, but hard to find something I like. My original idea was to have the background only take up the centre 70% or so, not the entire back. But I couldn’t figure out a happy way to do it
...why not try padding. borders, contrast-color biols text and semi-transparent bgr ( 0,0 0, ,0.5), maybe with some blur effectbellow it (with pseudoelement), which would supress the color and shape underneathn it?
Play with before/after then.
I did think about that. I think to add a blur/opacity to the background I’d have to add a layer over the top and then dull that layer, no? Atleast that’s how I remember doing it previously.
I used that before ... was it a backdrop filter or background-blend-mode? Would need to have a look, but it looks decent. / Also consider the hpverb effect.
...the background is a video with some semi-dark overlay
Yea that could work. So making the button bigger(padding, size or whatever), and maybe dulling down the background a bit to help split the difference
I’ll have to mess around with it tonight after work and see what I can come up with
Yea. Good to have one bright brand color fp\or these.
this is not how the real world works sadly. This is a real world example of a solution to an overburdened background which is a similar situation CDL is facing. You will frequently have client or work requests to use specific images in layouts even when they are difficult to work around. There is no magic one solution fits all bullet sadly
in this case, you will also want a more descriptive button for SEO, aria / accessability, and to make sure a shopper knows what will happen when they press the button. Something like 'Shop BRAND now' or 'Choose your BRAND / STYLE / SOME DESCRIPTOR shirt' etc
just saying 'browse' is not enough when you don't have a header or paragraph text giving more context clues to the visitor
These are all good tips 👀
i run multiple ecommerce pages, they are tips learned from blood and failure, 😄
Ah, well thanks then both haha. It’s my first attempt. It’s definitely a challenge finding the right image, and then trying to work that image in. I did look at the big ecomm sites and they all seem to have the button to the side with a larger image next to it, haven’t seen many where the button is over the image, like mine
yeah that is a pretty out of date style these days
you can still make it work though, like Majkl said, add a lot of padding and size to the button, make people desperately want to press it
😄
I mean, if the way I’m trying to do it isn’t ideal, I’m happy to change. I don’t want to get into a habit of building outdated designs 🤣 I tend to just gravitate towards centering elements.
Yet I strive for a robust solution.
Found a different picture, which gives me a little more room to move the button around/add text if I want to
I just need to figure out how to make it... fit...
and also what to do with the navbar coloring, as white doesn't seem to fit well.
I tend o use some div#herocontent, which can contain the main title or value proposition claim and a CTA. It is verically (or even horizontally) centered in the hero section (which tends to be full-page for homepage) and has that semi-transparent background with blur or whatever for a better contrast (so that the actual hero bgr image does not matter too much). Works for me ... but if anyone has a better concept...
I have a question. I'm assuming the screenshot for this issue is of hero section. Do you only have a button as a single element?
Yeah the “homepage” is just the button. Tbh I’d add more but I just want to get a fully functioning site going, then I can look to make it “more”
From UX perspective, Just a single button with no title doesn't give much context to users.
From UI perspective, There is whole lot of whitespace and just a button in the center.
From coding perspective, why not add a overlay on top of image to make your button stand out
You could adjust the opacity of the background color of the nav, try black with alpha with white text, try white + alpha and dark text, maybe even a small backdrop filter blur since underneath is an image that could shift w screen size.
Would also echo making the button larger if it’s the only element on the page and put real thought into the image: products/colours/brands ; make sure you choose an image that encourages the user to want to look at more products , consciously or subconsciously. Having less elements on the page is actually more difficult from a marketing perspective bc there is less copy that pushes the user to buy , less ctas, less marketing opportunities.
Thanks both! I’ll look into the homepage when home from work and try to make it more uhh.. clued up I guess is the right phrase 😂