Revision 1 of 3, by Trev on 2-7-2020. The page as it is now.

BGRAButton Gallery

Overview

This is a gallery of creations with BGRAButton. See BGRAControls article for more information.

Some of those examples can be found in testbgracontrols project in BGRAControls package.

<figure> <img src="lainzbutton.png" title="lainzbutton.png" /> <figcaption>lainzbutton.png</figcaption> </figure>

You need BGRABitmapTypes unit to run this code.

Add a new BGRAButton, go OnPaint event and add this code:

pascal

procedure TForm1.FormCreate(Sender: TObject);
begin
  Self.Color:=RGBToColor(230,230,230);
  // Lainz Button
  with BGRAButton1 do begin
    RoundX:=12;
    RoundY:=12;
    TextShadowOffsetX:=1;
    TextShadowOffsetY:=1;
    TextShadowRadius:=2;
    // Normal
    with BodyNormal do begin
      BorderStyle:=bboNone;
      Font.Color:=RGBToColor(230,230,255);
      Font.Style:=[fsBold];
      Gradient1.EndColor:=RGBToColor(64,64,128);
      Gradient1.StartColor:=RGBToColor(0,0,64);
      Gradient1EndPercent:=60;
      // Gradient2
      with Gradient2 do begin
        EndColor:=RGBToColor(0,0,64);
        GradientType:=gtRadial;
        Point1XPercent:=50;
        Point1YPercent:=100;
        Point2YPercent:=0;
        StartColor:=RGBToColor(64,64,128);
      end;
    end;
    // Hover
    with BodyHover do begin
      BorderStyle:=bboNone;
      Font.Color:=RGBToColor(255,255,255);
      Font.Style:=[fsBold];
      Gradient1EndPercent:=100;
      // Gradient1
      with Gradient1 do begin
        EndColor:=RGBToColor(0,64,128);
        GradientType:=gtRadial;
        Point1XPercent:=50;
        Point1YPercent:=100;
        Point2YPercent:=0;
        StartColor:=RGBToColor(0,128,255);
      end;
    end;
    // Clicked
    with BodyClicked do begin
      BorderStyle:=bboNone;
      Font.Color:=RGBToColor(230,230,255);
      Font.Style:=[fsBold];
      Gradient1EndPercent:=100;
      // Gradient1
      with Gradient1 do begin
        EndColor:=RGBToColor(0,0,64);
        GradientType:=gtRadial;
        Point1XPercent:=50;
        Point1YPercent:=100;
        Point2YPercent:=0;
        StartColor:=RGBToColor(0,64,128);
      end;
    end;
  end;
end;

Tips

Those are some tips and how-to's.

Sphere

<figure> <img src="bgraspherebutton.png" title="bgraspherebutton.png" /> <figcaption>bgraspherebutton.png</figcaption> </figure>

To create a sphere you need to set Width & Height to the same value and RoundX & RoundY a half of Width & a half of Height. Use this code to obtain a sphere like in the previous image:

pascal

BGRAButton1.Width:=200;
BGRAButton1.Height:=200;
BGRAButton.RoundX:=100;
BGRAButton.RoundY:=100;

Or do it in this way:

pascal

// Square
  with BGRAButton1 do begin
    Width:= 200;
    Height:= Width;
  end;

  // Sphere
  with BGRAButton1 do begin
    RoundX:= Round(Width div 2);
    RoundY:= Round(Height div 2);
  end;

Only one state

If you only want a solid button just with the state BodyNormal you must set to true the property StaticButton.

pascal

BGRAButton1.StaticButton:=True;

Button very slow

If the button is very slow you can disable TextShadow to improve speed.

pascal

BGRAButton1.TextShadow:=False;

And you can improve speed using Single gradient button or Single color button.

Single gradient button

You can use just only one gradient if you want.

pascal

BGRAButton1.Gradient1EndPercent:=100; // if you want to use only Gradient1
BGRAButton1.Gradient1EndPercent:=0; // if you want to use only Gradient2

Single color button

Changing the Style of the button you can display just a single color as background.

pascal

BGRAButton1.BodyNormal.Style:=bbsColor;

How to avoid flickering

The button will flicker if you are running Windows without themes (classic). To avoid this enable DoubleBuffered OnCreate event of each Form.

pascal

procedure TForm1.FormCreate(Sender: TObject);
begin
  Self.DoubleBuffered:=True;
end;

Using as Label

The easy way is set to true the property StaticButton.

pascal

BGRAButton1.StaticButton:=True;

Then set BodyNormal.Style to bbsClear and BodyNormal.BorderStyle to bboNone.

Like Web

Those are like websites, web apps.

Facebook Menu

<figure> <img src="bgrafacebook.png" title="bgrafacebook.png" /> <figcaption>bgrafacebook.png</figcaption> </figure>

Like Facebook Menu (2011), add a BGRAPanel with 2 BGRAButton inside, then go OnCreate event of Form1 and add this code:

pascal

procedure TForm1.FormCreate(Sender: TObject);
begin
  // Panel
  with BGRAPanel1 do begin
    BackgroundStyle:=bpsColor;
    BevelOuter:=bvNone;
    //Color:=RGBToColor(98,122,173); // Light Background
    Color:=RGBToColor(59,89,152);  // Dark Background
  end;
  // Light Menu
  with BGRAButton1 do begin
    TextShadow:=False;
    // Normal
    with BodyNormal do begin
      BorderColor:=RGBToColor(98,122,173);
      Color:=RGBToColor(98,122,173);
      Font.Color:=clWhite;
      Font.Style:=[fsBold];
      Style:=bbsColor;
    end;
    // Hover
    with BodyHover do begin
      BorderColor:=RGBToColor(109,134,183);
      Color:=RGBToColor(109,134,183);
      Font.Color:=clWhite;
      Font.Style:=[fsBold];
      Style:=bbsColor;
    end;
    // Clicked
    with BodyClicked do begin
      BorderColor:=clBlack;
      Color:=clWhite;
      Font.Color:=clBlack;
      Font.Style:=[fsBold];
      Style:=bbsColor;
    end;
  end;
  // Dark Menu
  with BGRAButton2 do begin
    TextShadow:=False;
    // Normal
    with BodyNormal do begin
      BorderColor:=RGBToColor(59,89,152);
      Color:=RGBToColor(59,89,152);
      Font.Color:=RGBToColor(42,66,128);
      Font.Style:=[fsBold];
      Style:=bbsColor;
    end;
    // Hover
    with BodyHover do begin
      BorderColor:=RGBToColor(75,103,161);
      Color:=RGBToColor(75,103,161);
      Font.Color:=RGBToColor(42,66,128);
      Font.Style:=[fsBold];
      Style:=bbsColor;
    end;
    // Clicked
    with BodyClicked do begin
      BorderColor:=clBlack;
      Color:=clWhite;
      Font.Color:=RGBToColor(42,66,128);
      Font.Style:=[fsBold];
      Style:=bbsColor;
    end;
  end;
end;

You can set Clicked properties same as Hover for standard buttons (not menu's).

Google Menu

<figure> <img src="bgragoogle.png" title="bgragoogle.png" /> <figcaption>bgragoogle.png</figcaption> </figure>

Like Google Menu (2011), add a BGRAPanel with a BGRAButton inside and another BGRAButton in the Form, then go OnCreate event of Form1 and add this code:

pascal

procedure TForm1.FormCreate(Sender: TObject);
begin
  // Background
  Self.Color:=clWhite;
  // Panel
  with BGRAPanel1 do begin
    BevelOuter:=bvNone;
    Gradient.StartColor:=clWhite;
    Gradient.EndColor:=RGBToColor(245,245,245);
  end;
  // Menu Button
  with BGRAButton1 do begin
    TextShadow:=False;
    // Normal
    with BodyNormal do begin
      BorderStyle:=bboNone;
      Font.Color:=RGBToColor(51,102,204);
      Style:=bbsClear;
    end;
    // Hover
    with BodyHover do begin
      BorderStyle:=bboNone;
      Gradient1.StartColor:=RGBToColor(227,234,248);
      Gradient1.EndColor:=RGBToColor(223,229,242);
      Font.Color:=RGBToColor(51,102,204);
      Gradient1EndPercent:=100;
    end;
    // Clicked
    with BodyClicked do begin
      BorderStyle:=bboNone;
      Gradient1.StartColor:=RGBToColor(227,234,248);
      Gradient1.EndColor:=RGBToColor(223,229,242);
      Font.Color:=RGBToColor(51,102,204);
      Gradient1EndPercent:=100;
    end;
  end;
  // Button
  with BGRAButton2 do begin
    TextShadow:=False;
    // Normal
    with BodyNormal do begin
      BorderColor:=RGBToColor(205,205,205);
      Gradient1.StartColor:=RGBToColor(241,241,241);
      Gradient1.EndColor:=RGBToColor(223,223,223);
      Font.Color:=clBlack;
      Gradient1EndPercent:=100;
    end;
    // Hover
    with BodyHover do begin
      BorderColor:=RGBToColor(205,205,205);
      Gradient1.StartColor:=RGBToColor(241,241,241);
      Gradient1.EndColor:=RGBToColor(223,223,223);
      Font.Color:=clBlack;
      Gradient1EndPercent:=100;
    end;
    // Clicked
    with BodyClicked do begin
      BorderColor:=RGBToColor(204,204,204);
      Color:=RGBToColor(204,204,204);
      Font.Color:=clBlack;
      Style:=bbsColor;
    end;
  end;
end;

Like Windows Controls

Those are like Windows Controls.

Windows 7 Button

<figure> <img src="bgrabuttonwin7.png" title="bgrabuttonwin7.png" /> <figcaption>bgrabuttonwin7.png</figcaption> </figure>

Like Windows 7 button, add a BGRAButton, then go OnCreate event of Form1 and add this code:

pascal

procedure TForm1.FormCreate(Sender: TObject);
begin
  // Button
  with BGRAButton1 do begin
    TextShadow:=False;
    RoundX:=3;
    RoundY:=3;
    // Normal
    with BodyNormal do begin
      Font.Color:=clBlack;
      Gradient1EndPercent:=50;
      BorderColor:=RGBToColor(112,112,112);
      Gradient1.StartColor:=RGBToColor(242,242,242);
      Gradient1.EndColor:=RGBToColor(235,235,235);
      Gradient2.StartColor:=RGBToColor(221,221,221);
      Gradient2.EndColor:=RGBToColor(207,207,207);
    end;
    // Hover
    with BodyHover do begin
      Font.Color:=clBlack;
      Gradient1EndPercent:=50;
      BorderColor:=RGBToColor(60,127,177);
      Gradient1.StartColor:=RGBToColor(234,246,253);
      Gradient1.EndColor:=RGBToColor(217,240,252);
      Gradient2.StartColor:=RGBToColor(190,230,253);
      Gradient2.EndColor:=RGBToColor(167,217,245);
    end;
    // Clicked
    with BodyClicked do begin
      Font.Color:=clBlack;
      Gradient1EndPercent:=55;
      BorderColor:=RGBToColor(44,98,139);
      Gradient1.StartColor:=RGBToColor(229,244,252);
      Gradient1.EndColor:=RGBToColor(196,229,246);
      Gradient2.StartColor:=RGBToColor(152,209,239);
      Gradient2.EndColor:=RGBToColor(104,179,219);
    end;
  end;
end;

Windows 7 Explorer ToolBar

<figure> <img src="bgratoolwin7.png" title="bgratoolwin7.png" /> <figcaption>bgratoolwin7.png</figcaption> </figure>

Like Windows 7 explorer toolbar button, add a BGRAVirtualScreen with a BGRAButton inside, then go OnCreate event of Form1 and add this code:

pascal

procedure TForm1.FormCreate(Sender: TObject);
begin
  // Button
  with BGRAButton1 do begin
    TextShadow:=False;
    RoundX:=2;
    RoundY:=2;
    // Normal
    with BodyNormal do begin
      Font.Color:=clBlack;
      BorderStyle:=bboNone;
      Style:=bbsClear;
    end;
    // Hover
    with BodyHover do begin
      Font.Color:=clBlack;
      Gradient1EndPercent:=50;
      BorderColor:=RGBToColor(187,202,219);
      Gradient1.StartColor:=RGBToColor(248,251,254);
      Gradient1.EndColor:=RGBToColor(237,242,250);
      Gradient2.StartColor:=RGBToColor(215,228,244);
      Gradient2.EndColor:=RGBToColor(193,210,232);
    end;
    // Clicked
    with BodyClicked do begin
      Font.Color:=clBlack;
      Gradient1EndPercent:=55;
      BorderColor:=RGBToColor(187,202,219);
      Gradient1.StartColor:=RGBToColor(226,236,245);
      Gradient1.EndColor:=RGBToColor(216,228,241);
      Gradient2.StartColor:=RGBToColor(207,219,236);
      Gradient2.EndColor:=RGBToColor(207,220,237);
    end;
  end;
end;

Go to OnRedraw of BGRAVirtualScreen and add this code:

pascal

procedure TForm1.BGRAVirtualScreen1Redraw(Sender: TObject; Bitmap: TBGRABitmap);
var
  gradBitmap: TBGRABitmap;
begin
  with BGRAVirtualScreen1 do begin
    gradBitmap:= DoubleGradientAlphaFill(ClientRect,BGRA(245,250,255,255),BGRA(230,240,250,255),
    BGRA(220,230,244,255),BGRA(221,233,247,255),gdVertical,gdVertical,gdVertical,0.50);
  end;
  with Bitmap do begin
    PutImage(0,0,gradBitmap,dmSet);
    gradBitmap.Free;
    Rectangle(0,0,Width,Height-2,BGRA(255,255,255,100),dmDrawWithTransparency);
    SetHorizLine(0,Height-1,Width-1,BGRA(160,175,195,255));
    SetHorizLine(0,Height-2,Width-1,BGRA(205,218,234,255));
  end;
end;

Office 2010 Button

<figure> <img src="bgraofficebutton.png" title="bgraofficebutton.png" /> <figcaption>bgraofficebutton.png</figcaption> </figure>

Like Office 2010 button, add a BGRAButton, then go OnCreate event of Form1 and add this code:

pascal

procedure TForm1.FormCreate(Sender: TObject);
begin
  Self.Color:=clWhite;
  // Button
  with BGRAButton1 do begin
    RoundX:=3;
    RoundY:=3;
    TextShadow:=False;
    // Normal
    with BodyNormal do begin
      BorderColor:=RGBToColor(207,208,210);
      Font.Color:=clBlack;
      Gradient1.StartColor:=RGBToColor(255,255,255);
      Gradient1.EndColor:=RGBToColor(237,239,241);
      Gradient1EndPercent:=100;
    end;
    // Hover
    with BodyHover do begin
      BorderColor:=RGBToColor(244,210,81);
      Font.Color:=clBlack;
      Gradient1.StartColor:=RGBToColor(254,241,189);
      Gradient1.EndColor:=RGBToColor(254,228,134);
      Gradient1EndPercent:=50;
      Gradient2.StartColor:=RGBToColor(254,228,134);
      Gradient2.EndColor:=RGBToColor(254,248,196);
    end;
    // Clicked
    with BodyClicked do begin
      BorderColor:=RGBToColor(194,161,63);
      Font.Color:=clBlack;
      Gradient1.StartColor:=RGBToColor(255,229,117);
      Gradient1.EndColor:=RGBToColor(255,216,107);
      Gradient1EndPercent:=50;
      Gradient2.StartColor:=RGBToColor(255,216,107);
      Gradient2.EndColor:=RGBToColor(255,239,129);
    end;
  end;
end;

Like Mac Controls

Those are like Mac Controls.

macOS Lion Button

<figure> <img src="bgrabuttonosxlion.png" title="bgrabuttonosxlion.png" /> <figcaption>bgrabuttonosxlion.png</figcaption> </figure>

Like macOS Lion button, add a BGRAButton, then go OnCreate event of Form1 and add this code:

pascal

procedure TForm1.FormCreate(Sender: TObject);
begin
  // Button
  with BGRAButton1 do begin
    TextShadow:=False;
    RoundX:=3;
    RoundY:=3;
    // Normal
    with BodyNormal do begin
      Font.Color:=clBlack;
      Gradient1EndPercent:=50;
      BorderColor:=RGBToColor(154,154,154);
      Gradient1.StartColor:=RGBToColor(255,255,255);
      Gradient1.EndColor:=RGBToColor(243,243,243);
      Gradient2.StartColor:=RGBToColor(236,236,236);
      Gradient2.EndColor:=RGBToColor(235,235,235);
    end;
    // Hover
    with BodyHover do begin
      Font.Color:=clBlack;
      Gradient1EndPercent:=50;
      BorderColor:=RGBToColor(86,87,143);
      Gradient1.StartColor:=RGBToColor(204,229,252);
      Gradient1.EndColor:=RGBToColor(161,209,249);
      Gradient2.StartColor:=RGBToColor(143,202,251);
      Gradient2.EndColor:=RGBToColor(207,245,253);
    end;
    // Clicked
    with BodyClicked do begin
      Font.Color:=clBlack;
      Gradient1EndPercent:=55;
      BorderColor:=RGBToColor(86,87,143);
      Gradient1.StartColor:=RGBToColor(144,195,241);
      Gradient1.EndColor:=RGBToColor(113,180,239);
      Gradient2.StartColor:=RGBToColor(97,173,240);
      Gradient2.EndColor:=RGBToColor(147,206,241);
    end;
  end;
end;

Other

Other stuff.

Lazarus Custom Drawn

<figure> <img src="bgracustomdrawn.png" title="bgracustomdrawn.png" /> <figcaption>bgracustomdrawn.png</figcaption> </figure>

dsAndroid, dsGrad, dsWinCE, dsXPTaskBar

Like Lazarus Custom Drawn Controls. Add 4 BGRAButton, then go OnCreate event of Form1 and add this code:

pascal

procedure TForm1.FormCreate(Sender: TObject);
begin
  // dsAndroid
  with BGRAButton1 do begin
    TextShadow:=False;
    RoundX:=4;
    RoundY:=4;
    with BodyNormal do begin
      BorderStyle:=bboNone;
      Font.Color:=clBlack;
      Gradient1EndPercent:=100;
      Gradient1.EndColor:=RGBToColor(202,202,198);
      Gradient1.StartColor:=RGBToColor(235,235,231);
      Gradient1.Point1YPercent:=70;
    end;
    with BodyHover do begin
      BorderStyle:=bboNone;
      Font.Color:=clBlack;
      Gradient1EndPercent:=100;
      Gradient1.EndColor:=RGBToColor(202,202,198);
      Gradient1.StartColor:=RGBToColor(235,235,231);
      Gradient1.Point1YPercent:=70;
    end;
    with BodyClicked do begin
      Color:=RGBToColor(227,227,224);
      BorderColor:=RGBToColor(172,172,170);
      Font.Color:=clBlack;
      Style:=bbsColor;
    end;
  end;

  // dsGrad
  with BGRAButton2 do begin
    TextShadow:=False;
    RoundX:=4;
    RoundY:=4;
    with BodyNormal do begin
      BorderStyle:=bboNone;
      Font.Color:=clBlack;
      Gradient1EndPercent:=100;
      Gradient1.EndColor:=RGBToColor(245,245,241);
      Gradient1.StartColor:=RGBToColor(253,253,253);
    end;
    with BodyHover do begin
      BorderStyle:=bboNone;
      Font.Color:=clBlack;
      Gradient1EndPercent:=100;
      Gradient1.EndColor:=RGBToColor(245,245,241);
      Gradient1.StartColor:=RGBToColor(253,253,253);
    end;
    with BodyClicked do begin
      Color:=RGBToColor(227,227,224);
      BorderColor:=RGBToColor(172,172,170);
      Font.Color:=clBlack;
      Style:=bbsColor;
    end;
  end;

  // dsWinCE
  with BGRAButton3 do begin
    TextShadow:=False;
    with BodyNormal do begin
      Color:=RGBToColor(245,245,241);
      BorderColor:=clBlack;
      Font.Color:=clBlack;
      Style:=bbsColor;
    end;
    with BodyHover do begin
      Color:=RGBToColor(245,245,241);
      BorderColor:=clBlack;
      Font.Color:=clBlack;
      Style:=bbsColor;
    end;
    with BodyClicked do begin
      Color:=RGBToColor(220,220,216);
      BorderColor:=clBlack;
      Font.Color:=clBlack;
      Style:=bbsColor;
    end;
  end;

  // dsXPTaskBar
  with BGRAButton4 do begin
    TextShadow:=False;
    RoundX:=4;
    RoundY:=4;
    with BodyNormal do begin
      BorderColor:=RGBToColor(219,219,215);
      Font.Color:=clBlack;
      Gradient1EndPercent:=100;
      Gradient1.EndColor:=RGBToColor(232,232,228);
      Gradient1.StartColor:=RGBToColor(245,245,241);
      Gradient1.Point1YPercent:=85;
    end;
    with BodyHover do begin
      BorderColor:=RGBToColor(219,219,215);
      Font.Color:=clBlack;
      Gradient1EndPercent:=100;
      Gradient1.EndColor:=RGBToColor(232,232,228);
      Gradient1.StartColor:=RGBToColor(245,245,241);
      Gradient1.Point1YPercent:=85;
    end;
    with BodyClicked do begin
      Color:=RGBToColor(227,227,224);
      BorderColor:=RGBToColor(172,172,170);
      Font.Color:=clBlack;
      Style:=bbsColor;
    end;
  end;
end;

Flash Player Setup

<figure> <img src="bgraflashplayersetup.png" title="bgraflashplayersetup.png" /> <figcaption>bgraflashplayersetup.png</figcaption> </figure>

Like Flash Player Setup, add 2 BGRAPanel, the first with a BGRAButton inside, then go OnPaint event of Form1 and add this code:

pascal

procedure TForm1.FormCreate(Sender: TObject);
begin
  // Background
  Self.Color:=RGBToColor(62,62,62);

  // Panel
  with BGRAPanel2 do begin
    BevelOuter:=bvNone;
    With Gradient do begin
      StartColor:=RGBToColor(203,19,23);
      EndColor:=RGBToColor(110,3,20);
    end;
  end;

  // Bottom Panel
  with BGRAPanel1 do begin
    BevelOuter:=bvNone;
    BackGroundStyle:=bpsColor;
    Color:=RGBToColor(76,76,76);
  end;

  // Button
  with BGRAButton1 do begin
    TextShadowOffSetX:=1;
    TextShadowOffSetY:=1;
    TextShadowRadius:=2;
    // Normal
    with BodyNormal do begin
      BorderColor:=RGBToColor(24,24,24);
      Font.Color:=clWhite;
      with Gradient1 do begin
        StartColor:=RGBToColor(104,104,104);
        EndColor:=RGBToColor(104,104,104);
      end;
      with Gradient2 do begin
        StartColor:=RGBToColor(103,103,103);
        EndColor:=RGBToColor(71,71,71);
      end;
    end;
    // Hover
    with BodyHover do begin
      BorderColor:=RGBToColor(24,24,24);
      Font.Color:=clWhite;
      with Gradient1 do begin
        StartColor:=RGBToColor(118,118,118);
        EndColor:=RGBToColor(118,118,118);
      end;
      with Gradient2 do begin
        StartColor:=RGBToColor(117,117,117);
        EndColor:=RGBToColor(81,81,81);
      end;
    end;
    // Clicked
    with BodyClicked do begin
      BorderColor:=RGBToColor(24,24,24);
      Font.Color:=clWhite;
      with Gradient1 do begin
        StartColor:=RGBToColor(92,92,92);
        EndColor:=RGBToColor(92,92,92);
      end;
      with Gradient2 do begin
        StartColor:=RGBToColor(91,91,91);
        EndColor:=RGBToColor(62,62,62);
      end;
    end;
  end;

end;

From the Free Pascal wiki, page "BGRAButton Gallery", as it stood on 2020-02-07 after a change by Trev, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's Licensing page. If you have concerns about this material, message the admin.