Button Generator
Button materials used on the WEB and homepage can be created automatically.
You can easily create a button material on the browser by setting the color and size, and entering the text of the button, and you can download it as JPG or PNG. You can use the created button for free.
Button creation screen
Select a color by color with the color picker on the left, set the button size, line width, rounded radius, etc. and enter the button text, and the button will be displayed below. You can also add text shadows and inner shadows in "Detailed Settings".In the case of Chrome etc., you can save the image by right-clicking and clicking "Save image as", but if you can not, click "Create JPG" or "Create PNG" below A JPG image or PNG image will be generated, so please save and use it.
| Font Size: | px |
| Button Width: | px |
| Button Height: | px |
| Line Width: | px |
| Rounded Radius: | px |
| Gradation: |
| Button Text: |
| Character Shadow: |
| Frame Border: |
| Inner Shadow: |
| Shadow Depth: | % |
| Shadow Pos X: | % |
| Shadow Pos Y: | % |
| Shadow Blur: | % |
Button image file
How to use button generator
Color selection
You can choose the background color of the button from the color picker on the left. In addition to clicking the palette to select a color, you can also specify the RGB color code directly or by entering the HSV value.
Settings
You can change the font size, button size, line width, etc. Numerical input can also be changed by moving the bar with range input.
| Font Size | You can specify the font size of the button characters between 8px and 96px. |
|---|---|
| Button Width | You can specify the width of the button between 40px and 300px. |
| Button Height | You can specify the vertical width of the button between 30px and 200px. The width and height of the button will be the specified size including the width of the line. |
| Line Width | You can specify the width of the button line between 0px and 20px. When it is 0px, the line is not displayed. |
| Rounded Radius | You can specify the radius of the rounded corners between 0px and 100px. If it exceeds half the width or height of the button, it will be the value. |
| Gradation | If "Off", it will be painted in the specified color. If "On", the color is painted with a gradation from a color brighter than the specified color to the specified color. Select "Invert" and the color of the gradation will be reversed. |
| Button Text | Enter the characters to be displayed on the button. The text color is displayed in white or black depending on the background color. You can also enter multiple lines. If the text is larger than the width of the button, it will be reduced horizontally to the size of the width of the button. |
Advanced
You can add detailed settings such as character shadows and inner shadows.
| Character Shadow | If set to "On", a shadow will be cast inside. The shadow settings are made below. The shadow color is displayed in black when the text color is white and in white when the text color is black. |
|---|---|
| Frame Border | Change the color of the border. In the case of "Colored", the color is based on the specified color, and in the case of "Black", it is displayed with a black border. If you check "Inside White Line", a white frame will be displayed inside the frame line. |
| Inner Shadow | If set to "On", a shadow will be cast inside. The shadow settings are made below. If set to "On", a shadow will be cast inside. The shadow settings are made below. |
| Shadow Depth | Set the shadow opacity from 0% to 100%. |
| Shadow Pos X | Set the horizontal position of the shadow from -100% to 100% based on the button position. |
| Shadow Pos Y | Set the vertical position of the shadow from -100% to 100% based on the button position. |
| Shadow Blur | Set how much the shadow is blurred from 0% to 100%. |
Convert to image
When saving the button, click "Create JPG" or "Create PNG" to create a JPG image and a PNG image, respectively. Right-click to save and use.
