HTML Explanation
01
The buttons are assigned the action-button class for the base styling, and additional classes like blue and red are used to set specific colors.
02
The <head> section includes links to an external stylesheet (style.css) and a Google Font (Pacifico).
03
The Pacifico font is used to style the text within the buttons, giving it a playful, cursive appearance.
04
Within the <body>, there are two buttons.
05
The first button with the text "Nu" has the blue class applied, making it blue.
06
The second button with the text "Manila" uses the red class for a red color scheme.
CSS Explanation
01
The CSS handles the styling and animation of the buttons.
02
It includes styles for the button's base appearance and for the hover and active states.
03
The body has a padding of 50px, providing some spacing around the buttons.
04
The .action-button class defines the primary style for the buttons.
05
The buttons are relative positioned and have padding of 10px 40px for size.
06
The border-radius of 10px makes the corners rounded.
07
The text uses the 'Pacifico' cursive font, is set to 25px in size, and colored white (#FFF).
08
text-decoration: none; removes the default underline from the links.
09
A small margin ensures spacing between the buttons.
10
Each color variant sets the button's background color, bottom border, and text shadow.
11
.blue sets the button to a blue background with a darker blue (#2980B9) bottom border and shadow.
12
Similarly, .red uses a red background and slightly darker red for the border and shadow.
13
The .animate class applies a short transition effect of 0.1s, making any change in appearance smooth.
14
The .action-button:active class defines what happens when the button is clicked:
15
The transform property shifts the button down by 5px, creating a pressed effect.
16
The bottom border color is reduced to give the illusion of depth.
HTML
CSS
JS
CSS