: How do you make a black play button overlay visible on light and dark backgrounds I have a black 70% opacity play button that sites on top of videos. On light backgrounds it is very clear

@Lee3735518

I would try it with some grey. So instead of 70% opacity with a black button, Try with some dark grey with a little less transparency.

You have to look for ways to get some white into it. Very transparent textures, gradients or very slight white noise might help also.

Vote Up Vote Down

@Smith574

if you are creating a website why not use CSS to transition the effect between dark and light backgrounds?

Code the circle with something like:

.circle {
border-radius: 50%;
width: 200px;
height: 200px;
}


Add a triangle with something like:

.arrow {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid white;
}


if i recall use the ~ selector to generate a transition when you have a dark background

That's if you are doing this for a website but I know you didn't specify that. Hope this helps.

Vote Up Vote Down

@Mendez620

If you have to keep the transparency, then at least make the icon itself solid, this will have enough contrast to work against the dark background - even if you can't see the outer transparent background.

Vote Up Vote Down