Lab 3-II: Button II : Content + Box Model

Feb 25, 2017 · 9 min read

By now you should’ve finished the CodeAcademy: Changing the Box Model lesson. If you haven’t, please finish it and then come back here!

Now we really get into what the box model is!

The box model comprises of the content in the center, with padding surrounding the context making the object bigger/smaller, and border surrounding the padding. Finally, outside of the border, margin gives space around the object.

How does the box model relate to buttons? Most if not all buttons are made using padding and margins! So let’s begin applying our knowledge.

Our HTML webpage only has one button so far, but let’s add more!

To start with, copy-paste the bolded code in the right places in index.html. (There are three sections you need to look at).

... some code before thisBut even if you’re not in an especially visual field, you can (and should!) create a sort of “gallery” of the work you’re most proud of. If you’re a writer, this could be clips to articles you’ve published around the web, photos of print articles, or links to books you co-authored or ghost wrote. If you’re in marketing, you could include examples of campaigns you ran or descriptions of events you helped put on. Even if you’re in sales or business development, try talking about some of the companies you’ve sold to or from, or give some idea about your sales numbers (without giving away anything proprietary, of course). Get creative and don’t think you can’t “show off” your work just because you don’t have anything tangible to show.</p>
        <footer class="major">
         <ul class="actions">
          <li><a href="http://www.accigallery.com/" class="mybutton">Gallery</a></li>
         </ul>
        </footer>
       </section>

And also here:

... some code before thisIf you think you can keep up with it somewhat regularly (two or three times a month, minimum), then consider adding a blog to your site. You can use it to talk about projects you’re working on, give your opinions on big happenings in your industry, or give advice to others trying to break in. (<a href="https://www.themuse.com/advice/writers-block-22-ideas-for-creating-great-content"> Here </a> are 22 ideas for keeping your blog filled with useful, unique content.)</p>
        <footer class="major">
         <ul class="actions">
          <li><a href="https://www.wordpress.com" class="mybutton">Read My Blog</a></li>
         </ul>
        </footer>
       </section>

And also here:

... some code before this<!-- Get Started -->
       <section id="cta" class="main special">
        <header class="major">
         <h2>Skills</h2>
         <p>Look at all the skills I have! 
       
         </p>
        </header>
        <footer class="major">
         <ul class="actions">
          <li><a href="generic.html" class="mybutton special">Awards & Recognition</a></li>
          <li><a href="generic.html" class="mybutton">Bucket List</a></li>
          <li><a href="generic.html" class="mybutton special">Trainings & Course Work</a></li>
          <li><a href="generic.html" class="mybutton">Travel </a></li>
         </ul>
        </footer>
       </section>

Okay! Now we have a few more buttons on the page. Let’s tweak the buttons a little more and give you a chance to play around with them.

Lab 3-II : More Buttons

So far, our button is made using only width/height and border. Now, we can add padding to give more space around the button text and margins to define behavior around the object. Open up your index.html in your webbrowser. Let’s scroll down to the Skills section. You should see 4 buttons in a row.

Our current buttons looks like:

They look like buttons….. but…. they look a little squished :(

Why do they look squished? Because… we haven’t added margins or padding yet. Notice the “Awards & Recognition” and “Trainings & Course Work” almost touch the edge of the button… which is bad design! In general, we always want a little space around the text.

To fix this let’s add padding to put some space around the words.

To do so, we’re going to add thepadding attribute to the buttons.

Copy/paste the bolded text into labs.css …

/* LAB 3 I - border + box */
#main .mybutton {
    /*Inline block gives buttons inline properties except with width and height.*/
    display: inline-block;
    font-weight: 300;
    /* height is the height of the button */
    height: 2.75em;
    /* line-height sets how tall a text height should be */
    line-height: 2.75em;    background-color: transparent;
    border: 1px #6b5393 solid;
    border-radius: 8px;
    min-width: 9.25em;
    /* !important tells the CSS compiler to overrule any other inherited rules
       with this line of rule */
    color: #6b5393;
    /* Remember, you want to change the cursor to a pointed hand to tell users
    that this object is a link you can click on. #goodUI */
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    /* We want nowrap because if the button container becomes too small,
    we don't want the text pushed out of the container.*/
    white-space: nowrap;    padding: 0 1.5em;

This gives the buttons 0 padding on the top/bottom and 1.5 em left/right.

We should also add margin to define behavior of the spacing around each button (this will create more spacing between the individual buttons).

margin: 0 2px;

This means “margin top/bottom and 2px left/right.”

Okay refresh your rowser. Now our buttons look better:

See how padding and margin makes a difference in a button? It gives a more polished look!

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Pop Quiz!

With a classmate sitting near you, try to mark on the above image where padding is and where margins are. If you’re not sure, try changing padding attribute to 100px or margin attribute to 100px to see what changes. (Then change it back.)

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Now that we’ve defined how the button looks normally, how can we make it more… special? For example, what if we hover the mouse over the button? We’d want to be able to tell when we’re hovering over a button versus not hovering over a button.

For example, open up http://www.sfgate.com/

Try hovering over various links on the page. Notice how the links change color when you hover over them?

To change how something looks when you hover over it, you add onto the button selector a :hover element. If we want our buttons to change when we hover over it, we select it like this (as a separate selector — it might seem awkward to add it in on a duplicate selector, but that’s just a convention of the :hover element. The reason why we select :hover like this is because you’re giving attributes to the action hover, not to the object button):

#main .mybutton { ...}#main .mybutton:hover {
 
}

Add the #main .mybutton:hover selector if you haven’t already.

This just selects objects with the id #main, for all classes .mybutton, whenever you hover over it.

I’m going to give it a light purple background color using the rgba(red,green,blue,alpha) format. rgba(red,green,blue,alpha) is another way of representing colors on the web, using red, green, blue, and alpha values. Red, green, and blue values range from 0–255 and alpha ranges from 0 to 1. The rgb part is obviously (red,green,blue), but alpha means opacity (a.k.a. how transparent the color is). You can Google search ‘rgb colors’ to make your own colors, but I’m going to use this for now:

#main .mybutton:hover {
    background-color: rgba(227, 217, 241, 0.25);
    color: #6b5393; }

Add your own background-color and color or feel free to use mine.

Here’s a great color picker tool to use!

http://www.hexcolortool.com/#b2ff00

Try to see what happens to your buttons now!

You should see something like this when hovering over “Awards & Recognition”:

My mouse is hovering over “Awards & Recognition”

Okay what if we want different buttons to look different?

For example, open up https://myspace.com/

(Woah, throwback.)

Notice how the “Sign up” button is different from the “Sign in” button even though they are both buttons. We can control and choose how to style different buttons with the same class by…

Adding more classes to the buttons!

If you look at the HTML code for buttons in index.html…

<ul class="actions">
          <li><a href="generic.html" class="mybutton special">Awards & Recognition</a></li>
          <li><a href="generic.html" class="mybutton">Bucket List</a></li>
          <li><a href="generic.html" class="mybutton special"> Trainings & Course Work</a></li>
          <li><a href="generic.html" class="mybutton">Travel </a></li>
         </ul>

Notice how some buttons have a special class as well as a mybutton class.

Thus, in the labs.css file, we can select these special buttons to be different by changing their background color.

Copy and paste the following bolded code in labs.css

#main .mybutton {
    BLAH BLAH A BUNCH OF CODE HERE}#main .mybutton:hover {
    /* rgba stands for red, green, blue, alpha (alpha is transparency) */
    background-color: rgba(227, 217, 241, 0.25);
    color: #6b5393;}#main .mybutton.special {
    background-color: #a89cc8;
    color: #ffffff;
    border: none;
}#main .mybutton.special:hover{
    background-color: #b8add6;
}

Once again, feel free to change these colors to whatever you like.

To select an object with two or more classes (class="mybutton special"), you chain together the selectors like .mybutton.special . That’s why you select .mybutton.special .

Refresh your page in your browser. At this point, your buttons should look like this:

At this point, we have pretty much defined the basic functionality needed for all buttons. Go ahead and tweak your buttons’ looks now, change the color, border size, border radius… etc. to whatever you would like your website to look like!

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Beyond this point, I’ll teach you something to give your button a little extra flair!

To give your button some depth, we can add a shadow to the bottom of the button.

To do this, we’ll use the attribute box-shadow which allows you to give any object shadows (as many layered shadows as you want).

box-shadow: Horizontal-offset   Vertical-offset   Spread   Color;

For our button, we’re going to give it a bottom shadow of solid purple, as well as a faint black shadow in the background. Copy/Paste the bolded text in the right place in labs.css.

#main .mybutton {...padding: 0 1.5em;
margin: 0 2px;box-shadow: 0 3px 0 rgb(126, 106, 160), 0 5px 5px rgba(0, 0, 0, .35);}

This may look complicated, but it’s simple enough once you break it down. The comma separates two different shadows on the same object.

0 3px 0 rgb(126, 106, 160) is the dark purple shadow on the bottom edge of the button because rgb(126, 106, 160) = purple.

0 5px 5px rgba(0, 0, 0, .35) is the fuzzy grey/black shadow at the bottom edge of the button because rgba(0, 0, 0, .35) = transparent black. It’s placed at the bottom 5px and with spread (how far from the center the object is) 5px.

Refresh the page.

Our button has some depth now!