Learning Commons:Student Orientation/Working With Content/Custom CSS and Javascript Effects/Adding a Button with a Hover Effect

From UBC Wiki

Note: Hey everyone, this post is meant for the website manual but will display on the home page of the blog. Don't feel like you need to read this or learn how to do it if you're working on the desk. (But if you interested, read away!)

This brief tutorial will explain how to create a button that changes when you hover over it. This kind of element is a dynamic way to link out to important content. Adding a hover feature makes your button very inciting to click. The hover functionality uses CSS to display a second image whenever you rollover a certain area with your mouse. The image also contains a link.

Step 1

Use Adobe Photoshop, Illustrator or similar software to create the main image of your button. For a detailed explanation on how to create the actual button image, check out YouTube. I’m sure they will be able to explain it better than I will.

Make sure to set up your file in the size you want your final button to be displayed. While you can change the size later in the Wordpress media editor, you will also need to re-add links and update the CSS code. It’s much easier to sort this out from the beginning. I recommend a 200x200 pixel file.

Ensure that the bottom layer of your Photoshop file is transparent, especially if your button has rounded edges. Now save the image as a .png file. PNG files will preserve the transparent elements of your image so the button will work, regardless of the background colour of the webpage. Title the file something logical like “main-button-200x200.png).

Sept 2

Now you need to create the second image. This will be what is displayed when you hover your mouse over the area. In theory, you could create any image you like. But for most buttons, it is best to create a slightly faded version of the original.

Select all the layers in your document and lower the opacity to 50%. Now save the file as a .png image. Make sure to title this one something different. It’s a good idea to make it extra clear that this is the overlay or hover version. A title like “overlay-button-200x200.png” would do just fine.

Step 3

Now upload both of your images to the Wordpress media library. Be sure to follow the best practices for titling images and adding meta-data (check the website manual on the CLC blog). You need to upload these images so they will have a unique URL, which the code can then pull onto your page. Take note of the URLs for each image. They should start with something like 'http://leap.sites.olt.ubc.ca/files/2012/06/……..”.

Step 4

It’s almost time to input the button onto your page, but first you need to add the CSS to make the hover effect work. Rather than adding CSS into a custom field at the bottom of the editing screen, we recommend adding it as awithin the html of the page.

Make sure you are working in HTML mode on Wordpress, not the visual editor. At the very top of the page (above any headers or titles), insert the following code:

Copy and Paste Version

 

Instructional Version css-button-code-colored-screengrab.jpg

Please keep the following things in mind:

  1. The words highlighted in red are the CSS class selectors for our hover button. Think of these words as a trigger. Whenever you use the class “button-link” in html, the style that we’ve set up with this CSS code will apply. You can title this whatever you want, but make sure that the both versions are preceded by a period in the CSS code. The second instance of the class selector must be followed by :hover.
  2. Change the links highlighted in yellow to the specific URLs of your images. The top link should be your main image, which will always be displayed. The bottom link should be the hover link, which will only be displayed when there is a cursor on it. (Make sure to keep the apostrophizes, parentheses and semicolon the same as the example above.
  3. If your images are anything other than 200x200 pixels. You will need to adjust all four figures in blue to the appropriate dimensions.

Step 5

Go into “edit page” and find the location in the code where you want to insert the button. Insert the following piece of html. <a class="button-link" href="http://learningcommons.ubc.ca/what-we-offer/peer-academic-coach/">Button</a> Change "button-link" to whatever you’ve titled your class selector. Change the url to whatever you want the button to link to. You can position the element, by adding inline style properties or additional properties to the in-page CSS style sheet.

Step 6

Update and/or publish the page. If everything went according to plan, you should have a functional and stylish hover button!

Resources and Other Considerations

For more information on CSS, check out <a href="http://www.codecademy.com/tracks/web">Code Academy</a>’s great interactive tutorials. For a compressive list of all CSS properties, values, etc., visit <a href="http://www.w3schools.com/css/">w3schools</a>.

If you plan on using the same button on many pages, consider adding the CSS to the site-wide custom CSS style sheet. Just copy and past everything in-between the style tags in the example above into the page-wide CSS (available if you have admin access, through the top menu bar that appears when you are logged in).

You can also build buttons and similar elements using only CSS and HTML (e.g. no images. While this gives you the benefit of a piece of code you can just put into the page, without linking to images, it does contain browser specific CSS properties, which may become outdated or incompatible with some browsers. Here is an example of what CSS-exclusive hover button might look like (please ignore the p tags, those are a quirk of getting code to display in a wordpress blog post):


 

  

   <head>
     <style>
     
    .button { 
         width:200px;
         height:200px;
         display:block;
         border-radius:100px;
         -moz-border-radius:100px;
         -webkit-border-radius:100px;
         -khtml-border-radius:100px;
         -o-border-radius:100px;
         -ms-border-radius:100px;
         box-shadow: 8px 8px 6px -2px eee;
         transform: rotate(-20deg);
         -webkit-transform: rotate(-20deg);
         -moz-transform: rotate(-20deg);
         -khtml-transform: rotate(-20deg);
         -o-transform: rotate(-20deg);
         -ms-transform: rotate(-20deg);
         font-size:40px;
         font-family: arial;
         color:#fff;
         line-height:200px;
         text-decoration:none;
         text-align:center;
         font-weight:900;
         background:#000}
        .button:hover {
         color:#fff;
         text-decoration:none;
         background:gray
    }
     </style>
   </head>
Retrieved from "https://wiki.ubc.ca/index.php?title=Learning_Commons:Student_Orientation/Working_With_Content/Custom_CSS_and_Javascript_Effects/Adding_a_Button_with_a_Hover_Effect&oldid=218236"