Software Used : Adobe Photoshop CC
- Create a new Photoshop document preferable larger size as once done you can use it on any size project
- Draw any shape button your want i.e. circle, oval, square, squared border rectangle; in this case we are using rounded edge rectangle.
- You want to create a copy of the above rectangle & shrink it slightly in size so it fits inside the previous rectangle; for ease name the larger rectangle as background & inner rectangle as foreground
- for the background if you are using it on a darker background use darker grey color and apply inner shadow & drop shadow effect customize the effect in the way you want or as shown in the bottom attached YouTube video.
- If the background is to be used on any image just leave it black in color & apply the blending mode as overlay so it adapts to any image you place it on.
- Now for the foreground rectangle select the option of gradient & use the colors you want & play around with options until you get what you like or just do as shown in the video bellow
- Then for the foreground apply bevel & emboss, use inner bevel & than play around with options or use the one showed in the video
- Apply outer glow with black color to the foreground rectangle
- Type your desired text usually I would just copy the layer style of the background rectangle & paste it on the text (not the overlay one)
- The button is ready for use
- If you want to use a ready made button I have attached a transparent background .png file in this article with text Click here & if you want to customize your own button I have also attached the original .PSD file in this article at the bottom; I would highly recommend you guys to watch the You Tube video at the bottom so you know how to customize the file & apply all the effect.
- I hope you like this article & the video
- Consider subscribing to our You Tube channel & read our blog for more tips for designing
- Stay tuned more article & video to come
FREE TRANSPARENT BACKGROUND BUTTON WITH CLICK HERE TEXT ON IT: DOWNLOAD HERE
FREE .PSD FILE EDITABLE WITH ALL THE LAYERS AND EFFECT: DOWNLOAD HERE
This files are created by me and are free to use no copyright, you don’t have to quote me however I would appreciate if you add a back link to my website https://blog.digitalwebdesignshop.com/ or insert my You Tube channel https://youtube.com/vidyapitroda