[Solved]Use gradient to draw horizontal elliptical effect so buttons look raised

Just starting out? Need help? Post your questions and find answers here.
User avatar
Distorted Pixel
Enthusiast
Enthusiast
Posts: 303
Joined: Sun Aug 29, 2021 4:34 am

[Solved]Use gradient to draw horizontal elliptical effect so buttons look raised

Post by Distorted Pixel »

Hi,

This is so far my best attempt to get the effect that I am after. I am after the same or similar effect like the jelly button does in IceDesign. I can't seem to get it right lol
Image

Code: Select all

Enumeration 
  #MainWindow
EndEnumeration


Enumeration Buttons
  #Button1
  #Button2
EndEnumeration

Global.i Button = 2, GadgetNum, ButtonPosX, ButtonPosY, ButtonWidth, ButtonHeight, FrontColor, BackColor ,TxtX, TxtY, TextWidth, TextHeight
Global Text$
Global FrontColor = RGB(255, 255, 0), BackColor = RGB(0, 0, 255)

Procedure ColorButton(GadgetNum, ButtonPosX, ButtonPosY, ButtonWidth, ButtonHeight, ButtonText.s, FrontColor, BackColor)
  
  
  Font = LoadFont(12, "Mx437 HP 100LX 6x8", 12)
  Img = CreateImage(#PB_Any, ButtonWidth, ButtonHeight)
  
  If StartDrawing(ImageOutput(Img))
    DrawingMode(#PB_2DDrawing_Gradient)
    BackColor(BackColor)
    EllipticalGradient(0, 15, ButtonWidth, ButtonHeight)
    Box(0, 0, ButtonWidth, ButtonHeight)
    DrawingFont(Font)
    For i = 1 To Button
      Select GadgetNum
        Case #Button1
          ButtonText = "Button 1"
        Case #Button2
          ButtonText = "Button 2"
      EndSelect      
    Next i
    DrawingMode(#PB_2DDrawing_Transparent)
    DrawText(100, 7, ButtonText, FrontColor);, BackColor)
    StopDrawing()
 
    
  EndIf
  
  ProcedureReturn ButtonImageGadget(GadgetNum, ButtonPosX, ButtonPosY, ButtonWidth, ButtonHeight, ImageID(Img))
EndProcedure

WFlags = #PB_Window_SystemMenu | #PB_Window_ScreenCentered
OpenWindow(#MainWindow, 0, 0, 400, 250, "Color Button Test", WFlags)

ColorButton(#Button1, 40, 40, 300, 30, Text$, FrontColor, BackColor)

ColorButton(#Button2, 40, 90, 300, 30, Text$, FrontColor, BackColor)

Repeat
  event = WaitWindowEvent()
Until event = #PB_Event_CloseWindow
Last edited by Distorted Pixel on Mon May 19, 2025 3:59 pm, edited 1 time in total.
To be popular is way to much work. I just want to be me, myself and I. Oh no, does that mean I'm bipolar? :shock:

No one cares how much you know until they know how much you care
User avatar
Distorted Pixel
Enthusiast
Enthusiast
Posts: 303
Joined: Sun Aug 29, 2021 4:34 am

Re: Use gradient to draw horizontal elliptical effect so buttons look raised

Post by Distorted Pixel »

I figured it out.

I changed the ellipticalGradient statement to this and it works. I just wish it looked more raised

Code: Select all

EllipticalGradient(ButtonWidth/2, ButtonHeight/2, ButtonWidth, ButtonHeight)
To be popular is way to much work. I just want to be me, myself and I. Oh no, does that mean I'm bipolar? :shock:

No one cares how much you know until they know how much you care
Post Reply