CSS Tips: How To Create Buttons Using CSS

cssbuttonsA long time back buttons were all the rage because it took some pretty nifty javascript knowledge to make them work. But that’s changed thanks to the power of CSS.

Buttons can be highly effective ways of highlighting links on your website, or displaying a “call to action”. In my experience people are often drawn to buttons more than standard links.

There are a few different ways you can use CSS to create buttons. The method that I tend to use most (and one of the simplest) is by using CSS to created class on an A tag.

The CSS Code:

a.button {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #CCC;
padding: 2px;
text-decoration:none;
text-align:center;
}

a.button:hover {
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

The HTML Code:

<a class=”button” href=”#”>Button</a>

Explanation:

First of all you will notice that there are 2 elements to the CSS.

The first is the actual styling for the A tag. This is the core design of the button, including the width, colors, shading etc. You will notice that I have given my elements a class called “button” by adding .button after the a in the CSS. This enables you to create multiple buttons of different styles using different class names (button1, button2, orangebutton, bigbutton, etc). In the code I have used i’ve set the background to light grey with a solid background that will be 8am wide. Virtually all this CSS is fully customizable. In fact, the only thing that you should keep intact is the “display:block” section.

The second section of the CSS refers to the hover effect of the button. What this does is tells the browser what to change after the mouse “hovers” over the element. Again, you will see i have connected it to the same class as the first section by giving it the .button class. The top / left elements will move the button slightly on hover and the border will change accordingly to give a hovered 3D effect. Hover over the demo button above to see how this works.

When you add the HTML code to your page, simply give it the relevant class (see code above) to match it all up and create CSS magic!

Want to fancy it up? Try adding rounded corners to the a.button section (ie. border:radius:4px;) to give a web2.0 type look and feel.

Helpful Links:

Webcredible (page includes CSS buttons)
Speckyboy CSS Styled Buttons

Share This:

CSS Tips: Box Shadows, Insets and Single Sided

Have you ever wanted to create a framed section of your website with a highlighted shadow style border, but didn’t know how? Well, using one of CSS 3’s great features called “box shadow” you can!

Example:

Example

.boxshadow {
box-shadow: 6px 6px 5px 5px #cccccc;
-moz-box-shadow: 6px 6px 5px 5px #cccccc;
-webkit-box-shadow:6px 6px 5px 5px #cccccc;
}

Browser Compatibility:

You will notice that I include 3 different forms of box-shadow code in my CSS. This is to ensure full browser compatibility among the Firefox, Opera, Safari and Chrome browsers. Internet Explorer requires extra code, which I will mention a little further down.

Explaining The CSS:

There are 5 parts to the Box Shadow code:

  1. Horizontal Offset (ie. 2px). This is the number that will tell the browser where to display the horizontal shadow. A positive number will move the shadow to the right and a negative will move the shadow to the left.
  2. Vertical Offset (ie. 2px). Similar to the horizontal offset, this moves the shadow up or down. A positive figure will move the shadow below the box and a negative number moves the shadow above the box.
  3. Blur Radius (ie. 5px). This allows you to “blue” the shadow to give it more or less detail. Note: this is optional.
  4. Spread Radius / Size (ie. 5px). This displays how large your box shadow is displayed. 0 is used by default. Note: this is optional.
  5. Color. Using different color codes you can specify how your shadow looks.

Insets and Single Sides:

In addition to regular shadow effects, you can use the “inset” feature to add the shadow inside the box instead of outside. The remaining properties remain the same (ie. horizontal, vertical, blur etc).

Inset

.insetboxshadow {
box-shadow: inset 0 0 8px #000000;
-moz-box-shadow: inset 0 0 8px #000000;
-webkit-box-shadow: inset 0 0 8px #000000;
}

From time to time you may also wish to only display a shadow on 1 side of a box. This is done by giving the spread/size a negative number (ie. negative spread radius) which will result in your shadow only being displayed on a single side of the box. Play around with this to see how it looks.

1 Sided

.1sideboxshadow {
box-shadow: 0px 8px 8px -8px #000000;
-moz-box-shadow: 0px 8px 8px -8px #000000;
-webkit-box-shadow: 0px 8px 8px -8px #000000;
}

Internet Explorer Additional CSS:

As with most things IE, they don’t recogise standard HTML out of the box, so you need to add a little extra code to make the magic happen. In this case we need to include a second CSS Div Class. A big thanks to css-tricks.com for helping me with this particular bit of code.

.ieshadow {
margin: 40px;
background-color: rgb(255,255,255); /* Required by IE. RGB 255 = White */
box-shadow: 2px 2px 5px 5px rgba(255,255,255,0.6);
-moz-box-shadow: 2px 2px 5px 5px rgba(255,255,255,0.6);
-webkit-box-shadow: 2px 2px 5px 5px rgba(255,255,255,0.6);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,
ShadowOpacity=0.30);
-ms-filter: “progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,
MakeShadow=true,ShadowOpacity=0.30)”;
zoom: 1;
}

.ieshadow .iecontent {
position: relative; /* This ensures the inner section is not blurred */
padding: 100px;
background-color: #ffffff;
}

Blue Shadow

The HTML code would therefore look like:

<div class=”ieshadow”>
<div class=”iecontent”>
Content
</div>
</div>

As with most things, trial and error will often get you the best results. If at first you’re not happy with the shadow of your divs, edit the css and try new settings.

Helpful Resources:

Css-tricks.com – Box Shadows
CSS Secrets Squidoo Lens

Share This:

Purple Paw Is Live: Affordable Professional Web Design

As many of you know, I have been involved with Website Design for a number of years and have often talked about launching my own business. I am very pleased to announce that I have indeed succeeded in this goal.

ppwdIntroducing… Purple Paw Web Design.

Purple Paw is a Joomla website solution specialist. While I do work with other methods of site build (static sites, CSS, WordPress, etc), Joomla is my area of expertese. Joomla is a solid web solution and can be used for a number of purposes, from single sales pages, full content information websites and even fully customized ecommerce solutions.

Purple Paw is a registered business in Australia and my details can be found on the Australian Business Registrar.

If you are ever in need of a new website, or have a current one that is in need of a do-over, please do not hesitate to drop by Purple Paw Web Design and give us a call.

Share This:

DIV Tags: 2 Column Template Tutorial

Yesterday I posted an article introducing some really handy DIV tag style features. Today I wanted to take that a step further and use those styles to build a very simple website frame.

The frame we’re going to build is going to have a 5 DIVs initially, with more added at the end to style the frame. I am going to build a fixed width template set to 480px wide, centered with a 1 pixel black border.

The key DIV styles that we will be using in this example are:

  • Float
  • Border
  • Padding
  • Margin
  • Background
  • Width
  • Height

Step 1: The Header

There are a few different ways you can build a basic site template. I personally like to start with logic, which in this case is the top. So we want to code in the header, keeping in mind that we need to include things like padding.

<div style=”width: 480px; height: 50px; border: 1px solid #000000; margin: 0pt auto;”>
</div>

The result:

Notice I also included a fixed height for the header of 50 pixels.

Step 2: The Container

Before we can add the main content and sidebar areas we need to add the container. This will be a DIV that is not viewable to the user in the end product (in this example), however I am going to make it viewable now and then remove it at the end so you can see the result/purpose. I have put the newly added code in red.

<div style=”width: 480px; height: 50px; border: 1px solid #000000; margin: 0pt auto;”>
</div>
<div style=”width: 480px; border: 1px solid #000000; margin: 2px auto;”>
</div>

The result:

You’ll notice that I changed the margin for this new DIV. By adding the 2px before and after the “auto” it added a 2 pixel gap between the container and the header. I also did not include any “height” styling, which has resulted in the DIV looking flat. This will change.

Step 3: The Main Content and Sidebar

Next we want to add the main content area and the sidebar to the frame. The code for these will go INSIDE the container DIV tags. I also added an extra DIV in there (hightlighted in blue) that closes off the 2 new DIVs and ensures when we load the footer that it loads without any overflow from the previous DIVs.

<div style=”width: 480px; height: 50px; border: 1px solid #000000; margin: 0pt auto;”>
</div>
<div style=”width: 480px; border: 1px solid #000000; margin: 2px auto;”>
<div style=”width: 376px; height: 100px; float: left; border: 1px solid #000000;”>
</div>
<div style=”width: 100px;
height: 100px; float: right; border: 1px solid #000000;”>
</div>

<div style=”clear: both;”></div>

</div>

The result:

As you can see, the structure is now starting to take shape.

Step 3: The Footer

The footer is much like the header, and is a basic DIV that loads underneath the current structure. One piece of extra code we need to add to the footer is the “clear” attribute, which tells the code to stop all the current tags and start from this location. By adding it to the footer, we’re able to ensure the main content and sidebars don’t flow over into the footer content. Previously I had this code in it’s own div. What we’re going to do is take the previously highlighted blue code and add that to the footer.

<div style=”width: 480px; height: 50px; border: 1px solid #000000; margin: 0pt auto;”>
</div>
<div style=”width: 480px; border: 1px solid #000000; margin: 2px auto 2px;”>
<div style=”width: 376px; height: 100px; float: left; border: 1px solid #000000;”>
</div>
<div style=”width: 100px; height: 100px; float: right; border: 1px solid #000000;”>
</div>
<div style=”clear: both;”>
</div>
</div>
<div style=”width: 480px; height: 25px; border: 1px solid #000000; margin: 2px auto;”>
</div>

The result:

Step 4: Final Styling

The site is taking shape. What we need to do now is add some extra styling. In particularly, we want to:

  • Remove the border from the container
  • Add 4 new DIVs to add padding (optional)
  • Colour the background of the Header (blue), sidebar (yellow) and footer (blue)
  • Adjust the width of the main content to allow spacing between it and the sidebar
  • Add basic text to highlight each area.

<div style=”background: #000066; width: 480px; height: 50px; border: 1px solid #000000; margin: 0pt auto;”>
<div style=”width: 460px; padding: 10px;”>
<strong>HEADER</strong>
</div>

</div>
<div style=”width: 480px; margin: 2px auto 2px;”>
<div style=”width: 373px; height: 100px; float: left; border: 1px solid #000000;”>
<div style=”width: 453px; padding: 10px;”>

<strong>MAIN CONTENT AREA</strong>
</div>
</div>
<div style=”background: #FFFF99; width: 100px; height: 100px; float: right; border: 1px solid #000000;”>
<div style=”width: 80px; padding: 10px;”>
<strong>SIDEBAR</strong>
</div>
</div>
<div style=”clear: both;”>
</div>
</div>
<div style=”background: #000066; width: 480px; height: 25px; border: 1px solid #000000; margin: 2px auto;”>
<div style=”width: 460px; padding: 10px;”>
<strong>FOOTER</strong>
</div>
</div>

The result:

HEADER

MAIN CONTENT AREA

SIDEBAR

FOOTER

There you have it. A relatively simple, straight foward template build 100% using CSS.

Next article I will cover bringing images into the DIV as backgrounds and adding basic content.

If you’re wanting to learn more, we strongly recommend the Web Design Mastery Course.

Web Design Mastery is a complete Internet Marketers Reference Guide. Not only will you learn how to design a professional website, but you’ll also learn in the easiest possible fashion.

It is a fantastic product that will teach you all you need to know about Web Design.

Share This:

DIV Tags: Basic Styling and Usage

Over the years there have been many forms of Web Design that have since become “old school”, irrelevant or simply out-dated. Often, they are replaced with far better methods that provide faster loading, better SEO and improved styling, such as the replacement of <b> with <strong> and <i> with <em>.

Another such feature are Tables <table>. While still heavily used by some people, they are slowly being used less and less across the Internet, and are being replaced by the Division or DIV tag <div>. Simply put, DIV allows you specify divisions within your document, much like a table would do with rows, columns and cells.

I’ve found the most common reason people don’t use DIVs is because they don’t understand how. I hope to shed a little light on DIVs in this article and show you how to add them to your site, style them as necessary and make them look great.

Basic Usage

As with every tag in HTML, DIV tags have both an open and close tags that wrap around the specific content.

<div>Content inside the DIV tag</div>

Any content you add within your DIV tags will be controlled by any styling you specify in your DIV (see below).

Styling a DIV can be done 3 ways:

  1. Use of an external CSS file
  2. Adding CSS styling to the header of the webpage
  3. Adding CSS styling directly to the DIV

In this example we are going to focus only on #3; adding CSS directly to the DIV tag.

There are many styling options you can use with tags. In the following examples we are going to focus only on a few of them, which include: width, border, background, padding, float and margin.

Styling

To style a DIV tag, you need to add the styling commands to the opening DIV tag. This is done as follows:

<div style=” “>
</div>

The style commands go within the ” ” section. If you wanted your DIV to be 75% wide, with a black border you would use something like this:

<div style=”width: 75%; border: 1px solid #000000;”>
DIV Content
</div>

Notice that after each style command you need a semicolon “;” and the styling is wrapped within the ” “. Your width can be fixed (ie. 500px) or fluid (ie. 50%). This DIV would look like this:

DIV Content

As you can see, this looks very basic. Now we’re going to add some padding between the text and the border, make the background of the DIV grey and center the entire DIV on the screen.

<div style=”width: 75%; border: 1px solid #000000; padding: 10px; background: #cccccc; margin: 0 auto;”>
DIV Content
You can add any HTML / PHP as required within here
</div>

By adding this extra styling we now have a DIV that looks like this:

DIV Content
You can add any HTML / PHP as required within here

It’s important to know that in order to center the DIV, you need to use the “margin: 0 auto” tag. This tells the DIV that the top and bottom margins are 0 and the left and right are auto, which in industry-standard browsers will cause the DIV to be centered on the screen. In Internet Explorer, this margin style may not work however. This is due to Microsoft not following industry standard styling with the Internet Explorer browser. I believe if you want a browser that displays pages correctly, you should be using Firefox, Chrome, Safari and Opera.

You can also add DIVs inside DIVs. What we’re going to do now is add a new box inside the current one that is aligned to the right. This will have a white background and a dashed border. To do this, we need to add a second section of DIV tags, styled to our needs. We will remove the margin tag from the new DIV and replace it with “float: right;” which will align the DIV to the right side of the current DIV.

<div style=”width: 75%; border: 1px solid #000000; padding: 10px; background: #cccccc; margin: 0 auto;”>
<div style=”width: 25%; border: 1px dashed #000000; padding: 5px; background: #ffffff; float: right;”>
Floating Right DIV
</div>
DIV Content
You can add any HTML / PHP as required within here</div>

This would result in this:

Floating Right DIV

DIV Content
You can add any HTML / PHP as required within here

There you have it, basic DIV styling using CSS.

Tomorrow I will post part 2 of this series which covers how to build a website template using the methods mentioned here.

If you’re wanting to learn more, we strongly recommend the Web Design Mastery Course.

Web Design Mastery is a complete Internet Marketers Reference Guide. Not only will you learn how to design a professional website, but you’ll also learn in the easiest possible fashion.

It is a fantastic product that will teach you all you need to know about Web Design.

Share This:

Beginners Guide to building a CSS Website – Videos #6 and #7

After a lengthy hiatus, we are back with 2 new videos in our beginners guide to building your own CSS website. In the latest 2 videos we show you how to use CSS driven image-bullet menus using the UL and LI functions, and also show you how to pull your template apart and re-build it using individual PHP files and the very handy PHP Require statement.

The videos:

CSS Tutorial to build your own CSS website – Part 6

CSS Tutorial to build your own CSS website – Part 7

You can also find our videos on YouTube at: http://www.youtube.com/user/trueblue55

Share This: