HTML/CSS Buttons

While blue links are a classic part of any webpage it’s great to have another visual method navigation.

After we work on buttons together, scroll down to the bottom of this page for your assignment. This is due in Canvas.

  1. create a folder called buttons.
  2. start a brand new, blank page in Brackets.
  3. copy/paste this starter code into your new file:
<html>
<head>
<title> Buttons</title>
</head>

<body style="background-color: white">
<h1 style="color: red">Welcome to my website.It has buttons.</h1>  <p><hr>

    
</body>
</html>

4. Now let’s add a button -copy/paste in between the <body> tags.

<button type="button">Click Me!</button>

5. Let’s style it:

<button style="background: green">click me!</button>

6. Now let’s give it a link – put the link HTML around it like this:

<a href ="http://google.com"><button style="background: green">Google it!</button></a>

7. And now for some style…look at how the cursor image changes. Replace the word copy with pointer, progress, help or no drop. Save, preview, observe.

<a href ="http://google.com"><button style="background: green;cursor: copy">Google it!</button></a>

8. All of this code so far has used IN-LINE styling. That means the style (color, font, shape) is done in the line of code.
Now let’s go to the next level and use CSS styling to change the look of our buttons.

Follow this link to work with examples of CSS Button Styling.