BGRAButton Gallery

From Lazarus wiki
Revision as of 01:44, 2 May 2011 by Lainz (talk | contribs) (→‎Like Google 2011: Fix Clicked Font Color)
Jump to navigationJump to search

Overview

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

Like Facebook Menu

bgrafacebook.png

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

<delphi>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;</delphi>

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

Like Google 2011

bgragoogle.png

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

<delphi>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;</delphi>

Like Windows Controls

Those are like Windows Controls.

Windows 7 Button

bgrabuttonwin7.png

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

<delphi>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;</delphi>

Windows 7 Explorer ToolBar

bgratoolwin7.png

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

<delphi>procedure TForm1.FormCreate(Sender: TObject); begin

 // Panel
 with BGRAPanel1 do begin
   Gradient.StartColor:=RGBToColor(245,250,255);
   Gradient.EndColor:=RGBToColor(221,233,247);
 end;
 // 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;</delphi>

Like Mac Controls

Those are like Mac Controls.

Mac OS X Lion Button

bgrabuttonosxlion.png

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

<delphi>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;</delphi>