Overview
Design
Frontend
Fullstack
Create Website
Blog
Frontend
Learn
->
Button with shadow
Docs
Book 🚧
Learn
Expander Crash Course
Part 1. Hello World
Install fastn
On Windows
On MacOS/Linux
Part 2. Basic UI
Part 3. Components
Part 4. Event Handling
Part 5. Publish a package
Part 6. Polishing UI
Button with shadow
Create rounded border
Create holy-grail layout
Understanding sitemap
Create clean URLs
Using images in documents
Add meta data
Markdown
Adding typography
Adding color scheme

How to create a button

Introduction

We are going to create button using fastn language.
To make the button we will use the concepts like:
  • components.
  • To the component we will apply various properties with their respective built-in types. Some of the Primitive Types like caption, string, boolean while others of the Derived Types like ftd.color, ftd.shadow.
  • We will use records as well to define colors for both light and dark mode as well as shadow-color similar to what we have in second button.
  • We will do event handling that gives shadow to the button on-hover.

Project buildup

Let’s start by creating a component and we will call it button. The syntax is:
-- component button:

-- end: button
Lang:
ftd

We will give the basic properties to this component like, title and link.

  • title is of caption type.
  • link is of string type.
You can also make the link as optional, if you do not want to add any link to it.
-- component button:
caption title:
optional string link:

-- end: button
Lang:
ftd

First, let’s create one basic button.

Inside this component we will add ftd.text that will take the title, a link and apply the border property to it.
-- ftd.text: $button.title
link: $button.link
border-width.px: 2
Lang:
ftd

The dollars used here is for reference that the value in the caption of ftd.text will come from component button’s title and same for link.

This will do. We can use this component to show the button. We have a basic button ready.
Let’s move to the second part where we start putting things together to make this UI. Let’s start applying some styling properties to the ftd.text
-- ftd.text: $button.title
link: $button.link
border-width.px: 2
padding.px: 10
border-radius.px: 6
min-width.fixed.px: 175
style: bold
text-align: center
Lang:
ftd

After that, we will give color and role to the text.

For that, in the component definition we have added a variable text-color of type ftd.color.

We can give a default value using $inherited.colors to this variable. In case, the user doesn’t pass any text-color, while calling this component, it will take the inherited color from the color-scheme.
-- component button:
caption title:
optional string link:
ftd.color text-color: $inherited.colors.text-strong


-- end: button
Lang:
ftd
And in the ftd.text, we will pass the reference of text-color to the color. And for the role we have passed as $inherited.type.copy-regular
-- ftd.text: $button.title
link: $button.link
border-width.px: 2
border-radius.px: 6
padding.px: 10
min-width.fixed.px: 175
style: bold
color: $button.text-color
role: $inherited.types.copy-regular
Lang:
ftd

role is a font specification which defines several font-related properties like font-weight, line-height, letter-spacing etc. If you want to read about roles you can checkout the ftd.responsive-type under built-in types. The URL provided in the description below.

Let’s keep improving it. We need background color and border color as well.
-- component button:
caption title:
optional string link:
ftd.color text-color: $inherited.colors.text-strong
ftd.color bg-color: $inherited.colors.background.base
ftd.color border-color: $inherited.colors.border-strong
Lang:
ftd
-- ftd.text: $button.title
link: $button.link
border-width.px: 2
border-radius.px: 6
padding.px: 10
min-width.fixed.px: 175
text-align: center
style: bold
color: $button.text-color
role: $inherited.types.copy-regular
background.solid: $button.bg-color
border-color: $button.border-color
Lang:
ftd
Since we are trying to copy the colors of this UI. I have created the custom color variables like:
-- ftd.color monochrome-dark:
light: black
dark: white

-- ftd.color monochrome-light:
light: white
dark: black

-- ftd.color shadow-color:
light: #cae9ee
dark: #e4b0ac
Lang:
ftd

These variables are of record type ftd.color. You can check the URL of records to read about them.

Let’s add the shadow to the button. First we will create a variable of type ftd.shadow, which is also a record.
-- ftd.shadow s:
color: $shadow-color
x-offset.px: 0
y-offset.px: 0
blur.px: 50
spread.px: 7
Lang:
ftd
Now we will add the component property of type ftd.shadow and make it optional
-- component button:
caption title:
optional string link:
ftd.color text-color: $inherited.colors.text-strong
ftd.color bg-color: $inherited.colors.background.base
ftd.color border-color: $inherited.colors.border-strong
optional ftd.shadow hover-shadow:
Lang:
ftd
And then will add shadow to the button
-- ftd.text: $button.title
link: $button.link
border-width.px: 2
border-radius.px: 6
padding.px: 10
min-width.fixed.px: 175
style: bold
role: $inherited.types.copy-regular
color: $button.text-color
background.solid: $button.bg-color
border-color: $button.border-color
shadow: $button.hover-shadow
Lang:
ftd
Now we can create events which on-hover shows the shadow. So we will create a boolean variable to component definition and create two events of on-mouse-enter and on-mouse-leave.
-- component button:
caption title:
optional string link:
ftd.color text-color: $inherited.colors.text-strong
ftd.color bg-color: $inherited.colors.background.base
ftd.color border-color: $inherited.colors.border-strong
optional ftd.shadow hover-shadow:
boolean $is-hover: false
Lang:
ftd
And then in the button we will add the events.
$on-mouse-enter$: $ftd.set-bool($a = $button.is-hover, v = true)
$on-mouse-leave$: $ftd.set-bool($a = $button.is-hover, v = false)
Lang:
ftd
And to the shadow we will add if condition.
shadow if { button.is-hover }: $button.hover-shadow
Lang:
ftd

Component calling

The button component is called inside a column container component.
-- ftd.column:
background.solid: white
width: fill-container
align-content: center
height.fixed.px: 280


-- button: Get a Demo
hover-shadow: $s
border-color: $shadow-color
text-color: $monochrome-dark
bg-color: $monochrome-light
link: https://fastn.com/expander


-- end: ftd.column
Lang:
ftd

Closing remarks

There you go, we have polished the UI and it looks similar to our original UI with our own touch to it. I hope you have learnt with me and found this video easy to follow. If you like us, you can give us a ✨ on GitHub.

Also, we would love to see your package which you will create following this video. You can share it on the dicord’s show-and-tell channel. Thank you guys.

Support fastn!

Enjoying fastn? Please consider giving us a star ⭐️ on GitHub to show your support!
⭐️

Getting Help

Have a question or need help?

Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.

Join our Discord channel and share your thoughts, suggestion, question etc.

Connect with our community!
💻️

Found an issue?

If you find some issue, please visit our GitHub issues to tell us about it.

Join us

We welcome you to join our Discord community today.

We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.
Copyright © 2023 - FifthTry.com