Button with border(image)

Hi, I'd like to do button with image border. How to do it?
Button is to have the words and the image is to be only a border, for example: http://iv.pl/images/77970399574007152901.jpg

If you're using the built-in Unity GUI system (I assume?) You need to create a GUI Skin.

There's a good tutorial on using them that you can read here.

Okay, thx.

If you have only one script using a custom GUIStyle, is not necessary create a GUISkin(recommended when we're using a custom GUIStyle in a lot of scripts).

For one script, you can create a GUIStyle object directly in script. This is the code:

using UnityEngine;
using System.Collections;

public class buttonBorder : MonoBehaviour {

    public GUIStyle buttonBorderStyle;
    public string text = "buttonText";
    public Vector2 buttonPosition = Vector2.zero;

    Rect rect;

    void Start(){

        rect = new Rect();
        rect.position = buttonPosition;
        rect.size = buttonBorderStyle.CalcSize(new GUIContent(text));


    void OnGUI(){




Proyect example, download link.

CalcSize, calculate rectangle text size. Modify Padding values in GUIStyle to create button margins.

To add border image to button, add background image in GUIStyle Normal rendering setting, and others necessary rendering settings.

I want it to use in a few scripts, so....Can someone show me how to make a border for the button? (Using the guiStyle).


GUISkin have 20 GUIStyles, and you're only going to use one for the buttons.

You can:
-Modify GUISkin.button.
-Create a custom GUIStyle in GUISkin.
-Create independent custom GUIStyle.