Firemonkey the style of a custom button

This article mimics the CSS-based button in HTML and implements a custom style button with a style.

Objective

The main emulation of the CSS code is as follows:

CSS Code

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21st 22 23 24 25 26 27

A.button { Text-align:center; Display:block; width:50px; Color: #fff; Text-decoration:none; font-weight:700; Line-height:1; Background-color: #e33100; -moz-border-radius:5px; -webkit-border-radius:5px; -moz-box-shadow:0 1px 3px Rgba (0,0,0,0.5); -webkit-box-shadow:0 1px 3px Rgba (0,0,0,0.5); text-shadow:0 -1px 1px rgba (0,0,0,0.25); border-bottom:1px solid Rgba (0,0,0,0.25); position:relative; Cursor:pointer; margin:10px Auto 0; padding:5px 10px 6px; } A.button:hover { Background-color: #c33100; }

1. Create a Firmonkey application

After the app is created, the default window is created, adding a tlayout and TButton

which

Window size settings:

BorderStyle = None
ClientHeight = 148
ClientWidth = 328

Layout's property settings:

Align = Bottom
Margins.bottom = 23

Property settings for button:

Align = Center
Size.width = 70.000000000000000000
Size.Height = 22.000000000000000000

2. Create a style for the custom button

Right-click on the button and select "Edit Custom Style ..." and the IDE will automatically create Stylebook without entering the style editing interface.

To change the stylename to A.button, click "Apply and Close", then the stylelookup of the button is still the default created stylename, change it to A.button

Then re-select "Edit Custom Style ...", will automatically enter the A.button style edit state.

Select Background and the Delete button above to delete the background.

In tool palette Select Trectangle, double-click to add a trectangle to the style.

Set the Rectangle property as follows:

Align = Contents

Fill.color = #FFE33100

HitTest = False

Stroke.kind = None

StyleName = background

Select Background, add a tcoloranimation

The properties are set as follows:

Select the text node:

Set the properties as follows:

Hotcolor = White

NormalColor = White

Pressedcolor = White

Textsettings.fontcolor = White

Shadow.color = #40000000

Shadow.offset.x =–1

SHADOW.OFFSET.Y = 1

Shadowvisible = True

3. Actual effect

4. Summary

There are many good CSS styles on the Web, and this little article demonstrates how to convert CSS styles to Firemonkey style.

The above code is hosted at the following address:

Https://github.com/zhaoyipeng/DelphiDemos/tree/master/BeautifulDialog

Firemonkey the style of a custom button