Sign in Join
Wiki copytemporary

BGRAButton Gallery: what changed

Revision 0 to 1. Removed lines have a minus sign; added lines have a plus sign.

Title: BGRAButton Gallery

OldNewLine
1+## Overview
2+
3+This is a gallery of creations with BGRAButton. See [[BGRAControls]] article for more information.
4+
5+Some of those examples can be found in *testbgracontrols* project in [[BGRAControls]] package.
6+
7+<figure>
8+<img src="lainzbutton.png" title="lainzbutton.png" />
9+<figcaption>lainzbutton.png</figcaption>
10+</figure>
11+
12+*You need BGRABitmapTypes unit to run this code.*
13+
14+Add a new BGRAButton, go OnPaint event and add this code:
15+
16+``` pascal
17+procedure TForm1.FormCreate(Sender: TObject);
18+begin
19+ Self.Color:=RGBToColor(230,230,230);
20+ // Lainz Button
21+ with BGRAButton1 do begin
22+ RoundX:=12;
23+ RoundY:=12;
24+ TextShadowOffsetX:=1;
25+ TextShadowOffsetY:=1;
26+ TextShadowRadius:=2;
27+ // Normal
28+ with BodyNormal do begin
29+ BorderStyle:=bboNone;
30+ Font.Color:=RGBToColor(230,230,255);
31+ Font.Style:=[fsBold];
32+ Gradient1.EndColor:=RGBToColor(64,64,128);
33+ Gradient1.StartColor:=RGBToColor(0,0,64);
34+ Gradient1EndPercent:=60;
35+ // Gradient2
36+ with Gradient2 do begin
37+ EndColor:=RGBToColor(0,0,64);
38+ GradientType:=gtRadial;
39+ Point1XPercent:=50;
40+ Point1YPercent:=100;
41+ Point2YPercent:=0;
42+ StartColor:=RGBToColor(64,64,128);
43+ end;
44+ end;
45+ // Hover
46+ with BodyHover do begin
47+ BorderStyle:=bboNone;
48+ Font.Color:=RGBToColor(255,255,255);
49+ Font.Style:=[fsBold];
50+ Gradient1EndPercent:=100;
51+ // Gradient1
52+ with Gradient1 do begin
53+ EndColor:=RGBToColor(0,64,128);
54+ GradientType:=gtRadial;
55+ Point1XPercent:=50;
56+ Point1YPercent:=100;
57+ Point2YPercent:=0;
58+ StartColor:=RGBToColor(0,128,255);
59+ end;
60+ end;
61+ // Clicked
62+ with BodyClicked do begin
63+ BorderStyle:=bboNone;
64+ Font.Color:=RGBToColor(230,230,255);
65+ Font.Style:=[fsBold];
66+ Gradient1EndPercent:=100;
67+ // Gradient1
68+ with Gradient1 do begin
69+ EndColor:=RGBToColor(0,0,64);
70+ GradientType:=gtRadial;
71+ Point1XPercent:=50;
72+ Point1YPercent:=100;
73+ Point2YPercent:=0;
74+ StartColor:=RGBToColor(0,64,128);
75+ end;
76+ end;
77+ end;
78+end;
79+```
80+
81+## Tips
82+
83+Those are some tips and how-to's.
84+
85+### Sphere
86+
87+<figure>
88+<img src="bgraspherebutton.png" title="bgraspherebutton.png" />
89+<figcaption>bgraspherebutton.png</figcaption>
90+</figure>
91+
92+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:
93+
94+``` pascal
95+BGRAButton1.Width:=200;
96+BGRAButton1.Height:=200;
97+BGRAButton.RoundX:=100;
98+BGRAButton.RoundY:=100;
99+```
100+
101+Or do it in this way:
102+
103+``` pascal
104+// Square
105+ with BGRAButton1 do begin
106+ Width:= 200;
107+ Height:= Width;
108+ end;
109+
110+ // Sphere
111+ with BGRAButton1 do begin
112+ RoundX:= Round(Width div 2);
113+ RoundY:= Round(Height div 2);
114+ end;
115+```
116+
117+### Only one state
118+
119+If you only want a solid button just with the state *BodyNormal* you must set to true the property *StaticButton*.
120+
121+``` pascal
122+BGRAButton1.StaticButton:=True;
123+```
124+
125+### Button very slow
126+
127+If the button is very slow you can disable *TextShadow* to improve speed.
128+
129+``` pascal
130+BGRAButton1.TextShadow:=False;
131+```
132+
133+And you can improve speed using *Single gradient button* or *Single color button*.
134+
135+### Single gradient button
136+
137+You can use just only one gradient if you want.
138+
139+``` pascal
140+BGRAButton1.Gradient1EndPercent:=100; // if you want to use only Gradient1
141+BGRAButton1.Gradient1EndPercent:=0; // if you want to use only Gradient2
142+```
143+
144+### Single color button
145+
146+Changing the *Style* of the button you can display just a single color as background.
147+
148+``` pascal
149+BGRAButton1.BodyNormal.Style:=bbsColor;
150+```
151+
152+### How to avoid flickering
153+
154+The button will flicker if you are running Windows without themes (classic). To avoid this enable *DoubleBuffered* OnCreate event of each Form.
155+
156+``` pascal
157+procedure TForm1.FormCreate(Sender: TObject);
158+begin
159+ Self.DoubleBuffered:=True;
160+end;
161+```
162+
163+### Using as Label
164+
165+The easy way is set to true the property *StaticButton*.
166+
167+``` pascal
168+BGRAButton1.StaticButton:=True;
169+```
170+
171+Then set BodyNormal.Style to bbsClear and BodyNormal.BorderStyle to bboNone.
172+
173+## Like Web
174+
175+Those are like websites, web apps.
176+
177+### Facebook Menu
178+
179+<figure>
180+<img src="bgrafacebook.png" title="bgrafacebook.png" />
181+<figcaption>bgrafacebook.png</figcaption>
182+</figure>
183+
184+Like Facebook Menu (2011), add a BGRAPanel with 2 BGRAButton inside, then go OnCreate event of Form1 and add this code:
185+
186+``` pascal
187+procedure TForm1.FormCreate(Sender: TObject);
188+begin
189+ // Panel
190+ with BGRAPanel1 do begin
191+ BackgroundStyle:=bpsColor;
192+ BevelOuter:=bvNone;
193+ //Color:=RGBToColor(98,122,173); // Light Background
194+ Color:=RGBToColor(59,89,152); // Dark Background
195+ end;
196+ // Light Menu
197+ with BGRAButton1 do begin
198+ TextShadow:=False;
199+ // Normal
200+ with BodyNormal do begin
201+ BorderColor:=RGBToColor(98,122,173);
202+ Color:=RGBToColor(98,122,173);
203+ Font.Color:=clWhite;
204+ Font.Style:=[fsBold];
205+ Style:=bbsColor;
206+ end;
207+ // Hover
208+ with BodyHover do begin
209+ BorderColor:=RGBToColor(109,134,183);
210+ Color:=RGBToColor(109,134,183);
211+ Font.Color:=clWhite;
212+ Font.Style:=[fsBold];
213+ Style:=bbsColor;
214+ end;
215+ // Clicked
216+ with BodyClicked do begin
217+ BorderColor:=clBlack;
218+ Color:=clWhite;
219+ Font.Color:=clBlack;
220+ Font.Style:=[fsBold];
221+ Style:=bbsColor;
222+ end;
223+ end;
224+ // Dark Menu
225+ with BGRAButton2 do begin
226+ TextShadow:=False;
227+ // Normal
228+ with BodyNormal do begin
229+ BorderColor:=RGBToColor(59,89,152);
230+ Color:=RGBToColor(59,89,152);
231+ Font.Color:=RGBToColor(42,66,128);
232+ Font.Style:=[fsBold];
233+ Style:=bbsColor;
234+ end;
235+ // Hover
236+ with BodyHover do begin
237+ BorderColor:=RGBToColor(75,103,161);
238+ Color:=RGBToColor(75,103,161);
239+ Font.Color:=RGBToColor(42,66,128);
240+ Font.Style:=[fsBold];
241+ Style:=bbsColor;
242+ end;
243+ // Clicked
244+ with BodyClicked do begin
245+ BorderColor:=clBlack;
246+ Color:=clWhite;
247+ Font.Color:=RGBToColor(42,66,128);
248+ Font.Style:=[fsBold];
249+ Style:=bbsColor;
250+ end;
251+ end;
252+end;
253+```
254+
255+You can set *Clicked* properties same as *Hover* for standard buttons (not menu's).
256+
257+### Google Menu
258+
259+<figure>
260+<img src="bgragoogle.png" title="bgragoogle.png" />
261+<figcaption>bgragoogle.png</figcaption>
262+</figure>
263+
264+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:
265+
266+``` pascal
267+procedure TForm1.FormCreate(Sender: TObject);
268+begin
269+ // Background
270+ Self.Color:=clWhite;
271+ // Panel
272+ with BGRAPanel1 do begin
273+ BevelOuter:=bvNone;
274+ Gradient.StartColor:=clWhite;
275+ Gradient.EndColor:=RGBToColor(245,245,245);
276+ end;
277+ // Menu Button
278+ with BGRAButton1 do begin
279+ TextShadow:=False;
280+ // Normal
281+ with BodyNormal do begin
282+ BorderStyle:=bboNone;
283+ Font.Color:=RGBToColor(51,102,204);
284+ Style:=bbsClear;
285+ end;
286+ // Hover
287+ with BodyHover do begin
288+ BorderStyle:=bboNone;
289+ Gradient1.StartColor:=RGBToColor(227,234,248);
290+ Gradient1.EndColor:=RGBToColor(223,229,242);
291+ Font.Color:=RGBToColor(51,102,204);
292+ Gradient1EndPercent:=100;
293+ end;
294+ // Clicked
295+ with BodyClicked do begin
296+ BorderStyle:=bboNone;
297+ Gradient1.StartColor:=RGBToColor(227,234,248);
298+ Gradient1.EndColor:=RGBToColor(223,229,242);
299+ Font.Color:=RGBToColor(51,102,204);
300+ Gradient1EndPercent:=100;
301+ end;
302+ end;
303+ // Button
304+ with BGRAButton2 do begin
305+ TextShadow:=False;
306+ // Normal
307+ with BodyNormal do begin
308+ BorderColor:=RGBToColor(205,205,205);
309+ Gradient1.StartColor:=RGBToColor(241,241,241);
310+ Gradient1.EndColor:=RGBToColor(223,223,223);
311+ Font.Color:=clBlack;
312+ Gradient1EndPercent:=100;
313+ end;
314+ // Hover
315+ with BodyHover do begin
316+ BorderColor:=RGBToColor(205,205,205);
317+ Gradient1.StartColor:=RGBToColor(241,241,241);
318+ Gradient1.EndColor:=RGBToColor(223,223,223);
319+ Font.Color:=clBlack;
320+ Gradient1EndPercent:=100;
321+ end;
322+ // Clicked
323+ with BodyClicked do begin
324+ BorderColor:=RGBToColor(204,204,204);
325+ Color:=RGBToColor(204,204,204);
326+ Font.Color:=clBlack;
327+ Style:=bbsColor;
328+ end;
329+ end;
330+end;
331+```
332+
333+## Like Windows Controls
334+
335+Those are like Windows Controls.
336+
337+### Windows 7 Button
338+
339+<figure>
340+<img src="bgrabuttonwin7.png" title="bgrabuttonwin7.png" />
341+<figcaption>bgrabuttonwin7.png</figcaption>
342+</figure>
343+
344+Like Windows 7 button, add a BGRAButton, then go OnCreate event of Form1 and add this code:
345+
346+``` pascal
347+procedure TForm1.FormCreate(Sender: TObject);
348+begin
349+ // Button
350+ with BGRAButton1 do begin
351+ TextShadow:=False;
352+ RoundX:=3;
353+ RoundY:=3;
354+ // Normal
355+ with BodyNormal do begin
356+ Font.Color:=clBlack;
357+ Gradient1EndPercent:=50;
358+ BorderColor:=RGBToColor(112,112,112);
359+ Gradient1.StartColor:=RGBToColor(242,242,242);
360+ Gradient1.EndColor:=RGBToColor(235,235,235);
361+ Gradient2.StartColor:=RGBToColor(221,221,221);
362+ Gradient2.EndColor:=RGBToColor(207,207,207);
363+ end;
364+ // Hover
365+ with BodyHover do begin
366+ Font.Color:=clBlack;
367+ Gradient1EndPercent:=50;
368+ BorderColor:=RGBToColor(60,127,177);
369+ Gradient1.StartColor:=RGBToColor(234,246,253);
370+ Gradient1.EndColor:=RGBToColor(217,240,252);
371+ Gradient2.StartColor:=RGBToColor(190,230,253);
372+ Gradient2.EndColor:=RGBToColor(167,217,245);
373+ end;
374+ // Clicked
375+ with BodyClicked do begin
376+ Font.Color:=clBlack;
377+ Gradient1EndPercent:=55;
378+ BorderColor:=RGBToColor(44,98,139);
379+ Gradient1.StartColor:=RGBToColor(229,244,252);
380+ Gradient1.EndColor:=RGBToColor(196,229,246);
381+ Gradient2.StartColor:=RGBToColor(152,209,239);
382+ Gradient2.EndColor:=RGBToColor(104,179,219);
383+ end;
384+ end;
385+end;
386+```
387+
388+### Windows 7 Explorer ToolBar
389+
390+<figure>
391+<img src="bgratoolwin7.png" title="bgratoolwin7.png" />
392+<figcaption>bgratoolwin7.png</figcaption>
393+</figure>
394+
395+Like Windows 7 explorer toolbar button, add a BGRAVirtualScreen with a BGRAButton inside, then go OnCreate event of Form1 and add this code:
396+
397+``` pascal
398+procedure TForm1.FormCreate(Sender: TObject);
399+begin
400+ // Button
401+ with BGRAButton1 do begin
402+ TextShadow:=False;
403+ RoundX:=2;
404+ RoundY:=2;
405+ // Normal
406+ with BodyNormal do begin
407+ Font.Color:=clBlack;
408+ BorderStyle:=bboNone;
409+ Style:=bbsClear;
410+ end;
411+ // Hover
412+ with BodyHover do begin
413+ Font.Color:=clBlack;
414+ Gradient1EndPercent:=50;
415+ BorderColor:=RGBToColor(187,202,219);
416+ Gradient1.StartColor:=RGBToColor(248,251,254);
417+ Gradient1.EndColor:=RGBToColor(237,242,250);
418+ Gradient2.StartColor:=RGBToColor(215,228,244);
419+ Gradient2.EndColor:=RGBToColor(193,210,232);
420+ end;
421+ // Clicked
422+ with BodyClicked do begin
423+ Font.Color:=clBlack;
424+ Gradient1EndPercent:=55;
425+ BorderColor:=RGBToColor(187,202,219);
426+ Gradient1.StartColor:=RGBToColor(226,236,245);
427+ Gradient1.EndColor:=RGBToColor(216,228,241);
428+ Gradient2.StartColor:=RGBToColor(207,219,236);
429+ Gradient2.EndColor:=RGBToColor(207,220,237);
430+ end;
431+ end;
432+end;
433+```
434+
435+Go to OnRedraw of BGRAVirtualScreen and add this code:
436+
437+``` pascal
438+procedure TForm1.BGRAVirtualScreen1Redraw(Sender: TObject; Bitmap: TBGRABitmap);
439+var
440+ gradBitmap: TBGRABitmap;
441+begin
442+ with BGRAVirtualScreen1 do begin
443+ gradBitmap:= DoubleGradientAlphaFill(ClientRect,BGRA(245,250,255,255),BGRA(230,240,250,255),
444+ BGRA(220,230,244,255),BGRA(221,233,247,255),gdVertical,gdVertical,gdVertical,0.50);
445+ end;
446+ with Bitmap do begin
447+ PutImage(0,0,gradBitmap,dmSet);
448+ gradBitmap.Free;
449+ Rectangle(0,0,Width,Height-2,BGRA(255,255,255,100),dmDrawWithTransparency);
450+ SetHorizLine(0,Height-1,Width-1,BGRA(160,175,195,255));
451+ SetHorizLine(0,Height-2,Width-1,BGRA(205,218,234,255));
452+ end;
453+end;
454+```
455+
456+### Office 2010 Button
457+
458+<figure>
459+<img src="bgraofficebutton.png" title="bgraofficebutton.png" />
460+<figcaption>bgraofficebutton.png</figcaption>
461+</figure>
462+
463+Like Office 2010 button, add a BGRAButton, then go OnCreate event of Form1 and add this code:
464+
465+``` pascal
466+procedure TForm1.FormCreate(Sender: TObject);
467+begin
468+ Self.Color:=clWhite;
469+ // Button
470+ with BGRAButton1 do begin
471+ RoundX:=3;
472+ RoundY:=3;
473+ TextShadow:=False;
474+ // Normal
475+ with BodyNormal do begin
476+ BorderColor:=RGBToColor(207,208,210);
477+ Font.Color:=clBlack;
478+ Gradient1.StartColor:=RGBToColor(255,255,255);
479+ Gradient1.EndColor:=RGBToColor(237,239,241);
480+ Gradient1EndPercent:=100;
481+ end;
482+ // Hover
483+ with BodyHover do begin
484+ BorderColor:=RGBToColor(244,210,81);
485+ Font.Color:=clBlack;
486+ Gradient1.StartColor:=RGBToColor(254,241,189);
487+ Gradient1.EndColor:=RGBToColor(254,228,134);
488+ Gradient1EndPercent:=50;
489+ Gradient2.StartColor:=RGBToColor(254,228,134);
490+ Gradient2.EndColor:=RGBToColor(254,248,196);
491+ end;
492+ // Clicked
493+ with BodyClicked do begin
494+ BorderColor:=RGBToColor(194,161,63);
495+ Font.Color:=clBlack;
496+ Gradient1.StartColor:=RGBToColor(255,229,117);
497+ Gradient1.EndColor:=RGBToColor(255,216,107);
498+ Gradient1EndPercent:=50;
499+ Gradient2.StartColor:=RGBToColor(255,216,107);
500+ Gradient2.EndColor:=RGBToColor(255,239,129);
501+ end;
502+ end;
503+end;
504+```
505+
506+## Like Mac Controls
507+
508+Those are like Mac Controls.
509+
510+### macOS Lion Button
511+
512+<figure>
513+<img src="bgrabuttonosxlion.png" title="bgrabuttonosxlion.png" />
514+<figcaption>bgrabuttonosxlion.png</figcaption>
515+</figure>
516+
517+Like macOS Lion button, add a BGRAButton, then go OnCreate event of Form1 and add this code:
518+
519+``` pascal
520+procedure TForm1.FormCreate(Sender: TObject);
521+begin
522+ // Button
523+ with BGRAButton1 do begin
524+ TextShadow:=False;
525+ RoundX:=3;
526+ RoundY:=3;
527+ // Normal
528+ with BodyNormal do begin
529+ Font.Color:=clBlack;
530+ Gradient1EndPercent:=50;
531+ BorderColor:=RGBToColor(154,154,154);
532+ Gradient1.StartColor:=RGBToColor(255,255,255);
533+ Gradient1.EndColor:=RGBToColor(243,243,243);
534+ Gradient2.StartColor:=RGBToColor(236,236,236);
535+ Gradient2.EndColor:=RGBToColor(235,235,235);
536+ end;
537+ // Hover
538+ with BodyHover do begin
539+ Font.Color:=clBlack;
540+ Gradient1EndPercent:=50;
541+ BorderColor:=RGBToColor(86,87,143);
542+ Gradient1.StartColor:=RGBToColor(204,229,252);
543+ Gradient1.EndColor:=RGBToColor(161,209,249);
544+ Gradient2.StartColor:=RGBToColor(143,202,251);
545+ Gradient2.EndColor:=RGBToColor(207,245,253);
546+ end;
547+ // Clicked
548+ with BodyClicked do begin
549+ Font.Color:=clBlack;
550+ Gradient1EndPercent:=55;
551+ BorderColor:=RGBToColor(86,87,143);
552+ Gradient1.StartColor:=RGBToColor(144,195,241);
553+ Gradient1.EndColor:=RGBToColor(113,180,239);
554+ Gradient2.StartColor:=RGBToColor(97,173,240);
555+ Gradient2.EndColor:=RGBToColor(147,206,241);
556+ end;
557+ end;
558+end;
559+```
560+
561+## Other
562+
563+Other stuff.
564+
565+### Lazarus Custom Drawn
566+
567+<figure>
568+<img src="bgracustomdrawn.png" title="bgracustomdrawn.png" />
569+<figcaption>bgracustomdrawn.png</figcaption>
570+</figure>
571+
572+*dsAndroid, dsGrad, dsWinCE, dsXPTaskBar*
573+
574+Like [[Lazarus Custom Drawn Controls]]. Add 4 BGRAButton, then go OnCreate event of Form1 and add this code:
575+
576+``` pascal
577+procedure TForm1.FormCreate(Sender: TObject);
578+begin
579+ // dsAndroid
580+ with BGRAButton1 do begin
581+ TextShadow:=False;
582+ RoundX:=4;
583+ RoundY:=4;
584+ with BodyNormal do begin
585+ BorderStyle:=bboNone;
586+ Font.Color:=clBlack;
587+ Gradient1EndPercent:=100;
588+ Gradient1.EndColor:=RGBToColor(202,202,198);
589+ Gradient1.StartColor:=RGBToColor(235,235,231);
590+ Gradient1.Point1YPercent:=70;
591+ end;
592+ with BodyHover do begin
593+ BorderStyle:=bboNone;
594+ Font.Color:=clBlack;
595+ Gradient1EndPercent:=100;
596+ Gradient1.EndColor:=RGBToColor(202,202,198);
597+ Gradient1.StartColor:=RGBToColor(235,235,231);
598+ Gradient1.Point1YPercent:=70;
599+ end;
600+ with BodyClicked do begin
601+ Color:=RGBToColor(227,227,224);
602+ BorderColor:=RGBToColor(172,172,170);
603+ Font.Color:=clBlack;
604+ Style:=bbsColor;
605+ end;
606+ end;
607+
608+ // dsGrad
609+ with BGRAButton2 do begin
610+ TextShadow:=False;
611+ RoundX:=4;
612+ RoundY:=4;
613+ with BodyNormal do begin
614+ BorderStyle:=bboNone;
615+ Font.Color:=clBlack;
616+ Gradient1EndPercent:=100;
617+ Gradient1.EndColor:=RGBToColor(245,245,241);
618+ Gradient1.StartColor:=RGBToColor(253,253,253);
619+ end;
620+ with BodyHover do begin
621+ BorderStyle:=bboNone;
622+ Font.Color:=clBlack;
623+ Gradient1EndPercent:=100;
624+ Gradient1.EndColor:=RGBToColor(245,245,241);
625+ Gradient1.StartColor:=RGBToColor(253,253,253);
626+ end;
627+ with BodyClicked do begin
628+ Color:=RGBToColor(227,227,224);
629+ BorderColor:=RGBToColor(172,172,170);
630+ Font.Color:=clBlack;
631+ Style:=bbsColor;
632+ end;
633+ end;
634+
635+ // dsWinCE
636+ with BGRAButton3 do begin
637+ TextShadow:=False;
638+ with BodyNormal do begin
639+ Color:=RGBToColor(245,245,241);
640+ BorderColor:=clBlack;
641+ Font.Color:=clBlack;
642+ Style:=bbsColor;
643+ end;
644+ with BodyHover do begin
645+ Color:=RGBToColor(245,245,241);
646+ BorderColor:=clBlack;
647+ Font.Color:=clBlack;
648+ Style:=bbsColor;
649+ end;
650+ with BodyClicked do begin
651+ Color:=RGBToColor(220,220,216);
652+ BorderColor:=clBlack;
653+ Font.Color:=clBlack;
654+ Style:=bbsColor;
655+ end;
656+ end;
657+
658+ // dsXPTaskBar
659+ with BGRAButton4 do begin
660+ TextShadow:=False;
661+ RoundX:=4;
662+ RoundY:=4;
663+ with BodyNormal do begin
664+ BorderColor:=RGBToColor(219,219,215);
665+ Font.Color:=clBlack;
666+ Gradient1EndPercent:=100;
667+ Gradient1.EndColor:=RGBToColor(232,232,228);
668+ Gradient1.StartColor:=RGBToColor(245,245,241);
669+ Gradient1.Point1YPercent:=85;
670+ end;
671+ with BodyHover do begin
672+ BorderColor:=RGBToColor(219,219,215);
673+ Font.Color:=clBlack;
674+ Gradient1EndPercent:=100;
675+ Gradient1.EndColor:=RGBToColor(232,232,228);
676+ Gradient1.StartColor:=RGBToColor(245,245,241);
677+ Gradient1.Point1YPercent:=85;
678+ end;
679+ with BodyClicked do begin
680+ Color:=RGBToColor(227,227,224);
681+ BorderColor:=RGBToColor(172,172,170);
682+ Font.Color:=clBlack;
683+ Style:=bbsColor;
684+ end;
685+ end;
686+end;
687+```
688+
689+## Flash Player Setup
690+
691+<figure>
692+<img src="bgraflashplayersetup.png" title="bgraflashplayersetup.png" />
693+<figcaption>bgraflashplayersetup.png</figcaption>
694+</figure>
695+
696+Like Flash Player Setup, add 2 BGRAPanel, the first with a BGRAButton inside, then go OnPaint event of Form1 and add this code:
697+
698+``` pascal
699+procedure TForm1.FormCreate(Sender: TObject);
700+begin
701+ // Background
702+ Self.Color:=RGBToColor(62,62,62);
703+
704+ // Panel
705+ with BGRAPanel2 do begin
706+ BevelOuter:=bvNone;
707+ With Gradient do begin
708+ StartColor:=RGBToColor(203,19,23);
709+ EndColor:=RGBToColor(110,3,20);
710+ end;
711+ end;
712+
713+ // Bottom Panel
714+ with BGRAPanel1 do begin
715+ BevelOuter:=bvNone;
716+ BackGroundStyle:=bpsColor;
717+ Color:=RGBToColor(76,76,76);
718+ end;
719+
720+ // Button
721+ with BGRAButton1 do begin
722+ TextShadowOffSetX:=1;
723+ TextShadowOffSetY:=1;
724+ TextShadowRadius:=2;
725+ // Normal
726+ with BodyNormal do begin
727+ BorderColor:=RGBToColor(24,24,24);
728+ Font.Color:=clWhite;
729+ with Gradient1 do begin
730+ StartColor:=RGBToColor(104,104,104);
731+ EndColor:=RGBToColor(104,104,104);
732+ end;
733+ with Gradient2 do begin
734+ StartColor:=RGBToColor(103,103,103);
735+ EndColor:=RGBToColor(71,71,71);
736+ end;
737+ end;
738+ // Hover
739+ with BodyHover do begin
740+ BorderColor:=RGBToColor(24,24,24);
741+ Font.Color:=clWhite;
742+ with Gradient1 do begin
743+ StartColor:=RGBToColor(118,118,118);
744+ EndColor:=RGBToColor(118,118,118);
745+ end;
746+ with Gradient2 do begin
747+ StartColor:=RGBToColor(117,117,117);
748+ EndColor:=RGBToColor(81,81,81);
749+ end;
750+ end;
751+ // Clicked
752+ with BodyClicked do begin
753+ BorderColor:=RGBToColor(24,24,24);
754+ Font.Color:=clWhite;
755+ with Gradient1 do begin
756+ StartColor:=RGBToColor(92,92,92);
757+ EndColor:=RGBToColor(92,92,92);
758+ end;
759+ with Gradient2 do begin
760+ StartColor:=RGBToColor(91,91,91);
761+ EndColor:=RGBToColor(62,62,62);
762+ end;
763+ end;
764+ end;
765+
766+end;
767+```
768+
769+---
770+*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](/wiki-contact).*
771+Category: BGRAControls

Back to history