9
TECHNOBIZ
COMPUTER 9
MODULE 5
The HTML Button tag defines a
clickable button which can be
used in linking to pages or
appear alert window. The
syntax of HTML Buttons:
<buttons> ….value…. </buttons>
HTML
https://www.w3schools.com/tags/tag_button.asp
BUTTONS
CSS STYLING ATTRIBUTES
.button {
background-color: #4CAF50; /* Color Attribute */
width: 250px; /* By default, the size of the button
is determined by its text content (as wide as its
content). Use the width property to change the
width of a button*/
border: none; /* Removes border */
CSS STYLING ATTRIBUTES
border: 2px solid #4CAF50; /* Shorthand styling
includes size, style and color*/
border-radius: 12px; /* Use the border-radius
property to add rounded corners to a button*/
color: white; /* Color Attribute for text */
CSS STYLING ATTRIBUTES
padding: 15px 32px; /* Use the padding property to
change the padding of a button*/
text-align: center; /* Center the details */
text-decoration: none; /* property specifies the
decoration added to text, and is a shorthand property
for: text-decoration-line, text-decoration-color
and text-decoration-style, (overline, line-through,
underline, underlineoverline)*/
PADDING An element's padding is the space between
its content and its border.
The padding property is a shorthand
Note: Padding property for:
creates extra space
within an element,
while margin padding-top
creates extra space
around an element. padding-right
padding-bottom
This property can
have from one to padding-left
four values.
CSS STYLING ATTRIBUTES
font-size: 16px; /* Use the font-size property to change
the font size of a button*/
float: left; /* Removes margin */
display: block; /* Use display:block instead
of float:left to group the buttons below each other,
instead of side by side*/
cursor: pointer; /* change the cursor */
}
Use the :hover selector to change the style of a button when you move the mouse
HOVERABLE BUTTONS
over it.
Tip: Use the transition-duration property to determine the speed of the"hover"
effect:
Use the box-shadow property to add shadows to a button:
SHADOW BUTTONS
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
box-shadow: 10px 10px 5px #aaaaaa
EXAMPLE:
PRESSING .button:active {
background-color: #3e8e41;
BUTTON box-shadow: 0 5px #666;
HTTPS://WWW.W3SCHOOLS.COM/CODE/TRYIT.ASP?
FILENAME=GKP7WHPWNK4N transform: translateY(10px);
}
MARGIN The margin property sets the margins for an
element, and is a shorthand property for the
following properties:
margin-top
margin-right
margin-bottom
margin-left
HTML RESPONSIVE
Responsive Web Design is about using HTML and CSS to
automatically resize, hide, shrink, or enlarge, a website,
to make it look good on all devices (desktops, tablets,
and phones). This will set the viewport of your page,
which will give the browser instructions on how to
control the page's dimensions and scaling.
HTML RESPONSIVE
Setting the view point
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
Responsive Images
1. Using the width Property - style="width:100%;"
2. Using the max-width Property - style="max-
width:100%;height:auto;"
HTML RESPONSIVE
Responsive Text size
The text size can be set with a "vw" unit,
which means the "viewport width".
That way the text size will follow the size of the
browser window:
<h1 style="font-size:10vw">Hello World</h1>
Using the Try It editor, https://www.w3schools.com/html/tryit.asp?
filename=tryhtml_basic, Design 4 buttons with the use of tags
discussed.
