A program demonstrating a custom, user-friendly button. <function open for change and personal use.>

This code is best viewed from the editor of DarkBASIC Professional.

This program shows how to create a button that is very user-friendly:
-It allows you to click while within its boundaries, then change your mind and move outside while the mouse button remains pressed.
-It does not activate when holding down the mouse and randomly moving over it.
-And, it lights up and indents to show when you are about to activate it.

You may even change the function to paste images rather than create boxes. When using the function, you need to create the button's placeholder to go under and a text or symbol to go over(so in order, placeholder -> button -> text/symbol).

The function requires you to also build an array titled 'ButtonData' with dimensions (x,2), where x is the number of buttons you will use. Yes, 0 is a valid button.

The Array allows you to monitor the button's variables, phase and active.
-Phase allows you to change to symbol and button according to when the mouse is 'not over'(0), 'over'(1), 'clicked'(2), and 'released'(3).
-Active tells you if the button has been activated(1) for one frame, else 0.

                                    ` This code was downloaded from The Game Creators
                                    ` It is reproduced here with full permission
                                    ` http://www.thegamecreators.com
                                    
                                    `Setup
set display mode 800,600,32,0               `display
set window on : set window size 816,612     `window
sync on : sync rate 32 : sync sleep 1       `syncronizing

`button array
buttons=1                     `number of buttons
dim ButtonData(buttons,2)     `setup array with 2 data per button (phase and press)

`define button variables
Bleft=375
Btop=290
Bright=425
Bbottom=310

`color palette
global grey1 as dword     `create global color
grey1= 0xff1f1f1f         `define color

global grey2 as dword
grey2= 0xff3f3f3f

global grey3 as dword
grey3= 0xff7f7f7f

global grey4 as dword
grey4= 0xffbfbfbf

global white as dword
white= 0xffffffff

global green1 as dword
green1= 0xff003f00

global green2 as dword
green2= 0xff00ff00

`setup background color
red=0 : green=0 : blue=128

`start loop
do

`refresh frame
cls rgb(red,green,blue)

`setup reservation box for button
box Bleft,Btop,Bright,Bbottom,grey2,grey3,grey2,grey3

`Use function to setup button
UpdateButton(1, Bleft, Btop, Bright, Bbottom, grey4, grey1, 1)

`setup text using button phase
if ButtonData(1,1)=0
 ink green1,0
else
 ink green2,0
endif

center text 400,290,"Color"

`Check for button press
ink white,0
if ButtonData(1,2)
 red=rnd(255) : green=rnd(255) : blue=rnd(255)
endif

`syncronize and goto do
sync
loop

`check for mouse inside of box
function MouseInside(left,top,right,bottom)
if mousex()>left and mousey()>top and mousex()<right and mousey()<bottom then inside=1
endfunction inside

`the button function
function UpdateButton(arraynumber, left, top, right, bottom, lightcolor as dword, darkcolor as dword, outlineflag)

phase= ButtonData(arraynumber, 1)

`phase zero is nothing, defined by no mouse contact
if phase=0
ButtonData(arraynumber,1)=0     `sets phase data
ButtonData(arraynumber,2)=0     `sets press data

if MouseInside(left, top, right, bottom) and mouseclick()=0 then phase=1     `option to move to phase one
endif

`phase one is a box with optional outline, defined by mouse over the button
if phase= 1
ButtonData(arraynumber,1)=1     `sets phase data
ButtonData(arraynumber,2)=0     `sets press data

`================================================================================
`may use paste image here, just change function input

 box left, top, right, bottom, darkcolor, lightcolor, darkcolor, lightcolor
if outlineflag     `start of optional outline
 ink darkcolor,0
 line left, top, left, bottom
 line left, bottom, right, bottom
 line right, bottom, right, top
 line right, top, left, top
endif               `end of optional outline

`============================================================

if not MouseInside(left, top, right, bottom) then ButtonData(arraynumber,1)=0     `option to return to phase zero
if mouseclick()=1 then phase=2     `option to move to phase two
endif

`phase two is an inverted box, meant to appear pressed, outline optional, defined by mouse inside and click
if phase= 2
ButtonData(arraynumber,1)=2     `sets phase data
ButtonData(arraynumber,2)=0     `sets press data

`================================================================================
`may use paste image here, just change function input

 box left, top, right, bottom, lightcolor, darkcolor, lightcolor, darkcolor
if outlineflag     `start of optional outline
 ink darkcolor,0
 line left, top, left, bottom
 line left, bottom, right, bottom
 line right, bottom, right, top
 line right, top, left, top
endif               `end of optional outline

`============================================================

if not MouseInside(left, top, right, bottom) then ButtonData(arraynumber,1)=0     `option to return to phase zero
if mouseclick()=0 then phase=3     `option to move to phase three
endif

`phase three is a single-frame data setting, allows press to equal one for one frame within the loop
if phase=3
ButtonData(arraynumber,2)=1     `sets press data
ButtonData(arraynumber,1)=1     `sets phase data(returns to one because mouseclick()=0)
endif

endfunction