Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Pause Button

Pause Button Focused

These two images are pause-buttons for a program. The first one shows the button in its default state and the second one when it is being focused on.

I am wondering how the person, who made these buttons, did the focus effect? I looked all over the Internet but couldn't find a tutorial or a hint on how to do something like that.

I recreated the first button with Inkscape. It has a background layer (the gray background as seen in the first picture ) and a button layer which contains the pause symbol (just two rectangles). But now I am clueless on how to proceed.

I hope I am in the right place with my question. Also if this is somehow not possible with Inkscape, I can only use Gimp. I have no photoshop :(

share|improve this question
@Ryan Thanks, looks like it will help. I will check it out. – Davlog Jun 20 '14 at 18:05

For the round glow effect, use a radial gradient. You can do that in the fill and stroke area by clicking the circle. The glow of the actual pause sign can be achieved using a blue box below the pause shaped the same. You assign a light blue to it and blurring int a bit. If you want the glow not to start directly at the border of the pause sign but with a small gap, you can add a border to the pause sign in the same color as the background.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.