Demo

Gray Button Green Button Black Button Blue Button

These examples will fade several link elements in and out. You can use transitions on links, unordered lists, navigation menus, divs, or get creative and think of other ways this can be applied. In these examples, I’ll simply apply the transitions to links.

Example 1 – Gray Button

Gray Button!

This css will fade in and out the text color, background-color, and border-color. This is what it will look like:

Markup

<a class="graybutton" href="#">Gray Button!</a>

CSS

.graybutton:link, .graybutton:visited {
	border: 1px solid #ddd;
	background-color: #f9f9f9;
	color: #777;
	text-decoration:none;
	padding: 7px 15px;
 
	-webkit-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
	-moz-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
	-o-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
	transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
}
 
.graybutton:hover {
	border-color: #aaa;
	background-color: #e3e3e3;
	color: #000;
 
	-webkit-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
	-moz-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
	-o-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
	transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
}

The css should be added to both a:link, a:visited and a:hover in order to get the fading effect when the user hovers over the link, and on hover release.

The transition css is written as shorthand above. The values are separated by commas and include property (e.g color), duration (e.g .25s), and timing (e.g linear). There is also a delay property (e.g 1s) that we won’t use here. It delays the transition for the specified time. The delay property would come 4th when using shorthand. You can write each property separately e.g transition-property: color .25s linear; on its own line, or use the shorthand, which is cleaner, and necessary when transitioning multiple properties, like the above gray button example.

The timing property can be specified as linear, ease, ease-in, ease-out, ease-in-out, or cubic-bezier (to specifiy your own timing curve). The example above uses linear for the text color transition, and ease-in-out for the background and border colors.

Browser Support

You’ll need to prefix the CSS so that all the major browsers that support the transition will render it. As you see in the example code above, you can use the -webkit, -moz, and -o prefixes for Safari/Chrome, Firefox, and Opera respectively. Another prefix used in some cases is -ms for Internet Explorer, but at this point in time transitions are not supported by IE9. You may still want to include the -ms prefix, so that when -ms-transition is in Microsoft’s working drafts, you won’t have to go back and edit your code.

Example 2 – Big Green Button

You could also add a border-radius for a different looking big green button. This example doesn’t include the 1px solid border and fades the green to a completely different brick color.

Big Green Button!

Markup

<a class="greenbutton" href="#">Big Green Button!</a>

CSS

.greenbutton:link, .greenbutton:visited {
	border-radius: 5px;
	color: #444;
	text-decoration: none;
	padding: 16px 32px;
	background-color: #8FCF45;
 
	-webkit-transition: color .5s linear, background-color .5s ease-in-out;
	-moz-transition: color .5s linear, background-color .5s ease-in-out;
	-o-transition: color .5s linear, background-color .5s ease-in-out;
	transition: color .5s linear, background-color .5s ease-in-out;
}
.greenbutton:hover {
	background-color: #D05944;
 
	-webkit-transition: background-color .25s ease-in-out;
	-moz-transition: background-color .25s ease-in-out;
	-o-transition: background-color .25s ease-in-out;
	transition: background-color .25s ease-in-out;
}

Example 3 – Black Button with Gradient

Currently, background color gradients are not capable of having transitions without hacks. One way around this is to transition an opacity so everything is faded in and out. This way you can keep your background gradients and the transition looks pretty good.

Black Button w/ Gradient!

Markup

<a class="blackbutton" href="#">Black Button w/ Gradient!</a>

CSS

.blackbutton:link, .blackbutton:visited {
	border-radius: 12px;
	color: #ddd;
	text-decoration:none;
	padding: 6px 20px;
	background: #000;
	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
	background: -moz-linear-gradient(top, #666, #000);
	background: -o-linear-gradient(top, #666, #000);
	background: linear-gradient(top, #666, #000);
	opacity: 1;
	-webkit-transition: opacity 1s ease;
	-moz-transition: opacity 1s ease;
	-o-transition: opacity 1s ease;
	transition: opacity 1s ease;
}
.blackbutton:hover {
	opacity: .7;
	-webkit-transition: opacity .5s ease;
	-moz-transition: opacity .5s ease;
	-o-transition: opacity .5s ease;
	transition: opacity .5s ease;
}

Example 4 – Fancy Blue Button

You can also add a text-shadow and box-shadow with a 50/50 gradient background for a fancy blue button.

Fancy Blue Button!

Markup

<a class="bluebutton" href="#">Fancy Blue Button!</a>

CSS

.bluebutton:link, .bluebutton:visited {
	color: #ccc;
	text-decoration: none;
	text-shadow: 0 -1px 1px #000F4D;
	padding: 10px 30px;
	background: #8C9CBF;
	background: -webkit-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
	background: -moz-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
	background: -o-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
	background: linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
	border-color: #172D6E #172D6E #0E1D45;
	box-shadow: 0 1px 0 0 #B1B9CB inset;
	border: 1px solid #172D6E;
	border-radius: 6px;
 
	-webkit-transition: color .5s linear, background .5s ease-in-out;
	-moz-transition: color .5s linear, background .5s ease-in-out;
	-o-transition: color .5s linear, background .5s ease-in-out;
	transition: color .5s linear, background .5s ease-in-out;
}
.bluebutton:hover {
	color: #fff;
	background: #7F8DAD;
	background: -webkit-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
	background: -moz-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
	background: -o-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
	background: linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
 
	-webkit-transition: color .25s linear, background .25s ease-in-out;
	-moz-transition: color .25s linear, background .25s ease-in-out;
	-o-transition: color .25s linear, background .25s ease-in-out;
	transition: color .25s linear, background .25s ease-in-out;
}

Run along now and change the colors, sizes and durations to get the desired look and feel for your website. There are endless possibilities to explore using CSS3 transitions for buttons!

It’s Here. Drupal 7.0

Ever been frustrated with sites like Facebook, Myspace and other social networks, but feel that your company or organization could really benefit from being a part of a social network? Does not having control over the ads, branding and other aspects make them not an option, or a bad option?

There is a solution I will already recommend, even before its official launch from beta. I’ve been playing around with a couple installs of Buddypress, along with a couple custom plugins, allowing you to take complete control of your own social network, and offer a place that people can interact with your business offerings. There are other “free” solutions out there already for creating your own social network, but they tend to offer you a freebie version, with limitations, and lock you into buying add-ons. Many have limitations with resources, because the site is actually hosted on their server, instead of on your own. Not to mention, most are not open source, or have anywhere near the following that the WordPress community has.  Buddypress is run entirely on your own server, without any paid add-on limitations, and will change the way people and organizations interact with one another.

Buddypress is completely open-source, and one of the great reasons why WordPress is so great. Projects like Buddypress can arise from nowhere, because of the great extensibility of the WordPress blogging platform.

Buddypress is different than the other software already available, and I feel will be a major player in the social networking realm, as did WordPress for blogging. Buddypress is currently limited to running on WordPress MU, but will soon be released as a set of plugins for the WordPress standalone version. I feel this is an exciting thing, and can only help move WordPress forward as well. Obviously Automattic felt the same way, by taking in Buddypress and Andy Peatling, the lead developer, under its wings.

The versatility and extensibility that WordPress offers, along with a substantial community of great developers helping out, makes Buddypress an option for many organizations, including non-profits, in the need to expand their reach to a larger community-based audience.

I’m sure you will hear much more on this from me in the near future.

One question is always about meta tags. There is still a lot of confusion about them and how they will benefit your website. My answer is usually, “forget about them.” On my list, they are one of the last worries you should be having as a newbie trying to get SE traffic. In most cases, you don’t need them, so don’t waste much time on them. It’s as simple as that.

If you are trying to get more search engine traffic, from my experience, the major factors of SEO in order of importance are:

1. Content including all text, images and video, is most important. Write/produce great content, worthy of being shared and linked to. Formatting the content is important including usage of headings (h1 h2 etc. tags), bold text, italics, links etc. Make sure all links are working and relevant. Use descriptive titles and headings. High quality semantic code that ALL search engines can understand is important. Make sure it is excellent content, and you will get results.
2. Incoming Links from other quality & related websites/pages (good descriptive link text/phrases) to multiple pages, not just your home page. It is very important your incoming links are to multiple pages, not just your home page. Make sure they are unpaid, don’t mess around with link buying and other scams that will just end up getting your site penalized by the search engines.
3. Title tags (what you see at top of browser when viewing a page, within <title> tags. Use descriptive and appealing titles to insure you get the most people interested in visiting.
4. Links with good phrases to other internal pages within your site, and links to other external quality & related websites / pages also. This is number four on the list, but could easily move up to third depending on the type of website. Once again, this deals with your on page content and site architecture. Make browsing your site easy, and link to other reputable websites users will find useful, and you will create a better user experience. You will gain trust with your readers and the search engines will award you as well.
5. Social Media helps. Use it. It sends good signals to search engines that your content doesn’t just live in a box. Get an active following and spread the word about your awesome content.
6. Meta Description tags that are relatively short and precise, must match on page content. Not all search engines even look at this, so don’t spend too much time worrying about the perfect descriptions.
7. ALT Attributes for image tags. You’d be surprised at how much traffic you can get by simply adding short, descriptive, 3-5 word ALT phrases for all your images.

There are many things NOT to do also, mainly dealing with trying to trick search engines (including adding false, and too many meta keywords). It is better to not add any meta keywords at all. If for some reason you must add them, make sure the on page content matches the keywords, and do not use duplicate keywords on different pages, or your page could be penalized.

If you have limited time for your project, I would recommend working on new content first of all, optimized with the seven most important factors above. Secondly, find lots of incoming text links from quality/related sites. You will not only get new referral traffic, but you will boost your chances of getting a lot of new traffic from search engines.

Do all of these things I’ve listed and I bet you’ll be surprised at the quality new traffic you’ll get. Of course, some of the best traffic is by word of mouth and recommendations from actual people. But, that’s a whole other subject.

On the Southwest Construction Consultant site, a major portion of the functionality is the reservation system. The site needed to be able to have users reserve time slots for home inspections. I was able to find a component called Attend Events that handled this “out of the box”, open-source so I could customize any details necessary, and available for free. There is also a component for Joomla called JEvents that can be used with Attend Events that will show a calendar of all events. In the case of the Southwest Construction website, this was unnecessary, but can be useful for other sites with event organization needs.

Please do not use the Southwest Construction Consultant site for any test purposes, as it is a live site. There are demo pages and support available to you in the Attend Events forum.

The first method is to use the “Optional Excerpt” field when posting and a plugin called DBPostsForCategory. It’s hard to find because the developer’s site (Dhruba.net) has been down for awhile, but you can download it here: DBPostsForCategory.txt. Change .txt to .php.

You can add html to the “Optional Excerpt” field for each post pointing to any image, thumbnail or icon. In this case we’ll point it to a 24×24 icon “myposticon.gif”
The code you’d enter in the optional excerpt would be:

<img src”http://yourdomain.com/pathtoimage/myposticon.gif” />

or you could add a link to your excerpt so the icon links to the post also. You’d use this:

<a href=”http://yourdomain.com/yourpost/”><img src”http://yourdomain.com/pathtoimage/myposticon.gif” /></a>

Next thing to accomplish would be a list of new posts with the images (excerpts) next to them. Upload and activate the DBPostsForCategory plugin and use this code in your template:

<?php DBPostsForCategory :: printAsExcerptItems(1, 5, true) ?>

You can adjust the category using the first number in the array, how many posts shown, and change to false for descending order. So if you wanted to list the latest 10 excerpts from category ID 7 in ascending order you would use:

<?php DBPostsForCategory :: printAsExcerptItems(7, 10, false) ?>

Now, another way to achieve virtually the same thing, but using custom fields you would first need to add a custom field key and a url value pointing to the image. For example:

Key: icon Value: http://www.yourdomain.com/myposticon.gif

Now we have to edit your template with some php to show this custom field. We are going to want to show the post icon linked to the post. So here is the code to achieve this:

<?php $iconfield = get_posts(‘numberposts=10&category=7′); foreach($iconfield as $post) : setup_postdata($post); ?>
<a href=”<?php the_permalink(); ?>”><img src=”<?php echo get_post_meta($post->ID, “icon”, true); ?>” alt=”<?php the_title(); ?> icon” /></a>
<?php endforeach; ?>

You could of course show the icons to the left of the post title. You would use this code instead:

<?php $iconfield = get_posts(‘numberposts=10&category=7′); foreach($iconfield as $post) : setup_postdata($post); ?>
<a href=”<?php the_permalink(); ?>”><img src=”<?php echo get_post_meta($post->ID, “icon”, true); ?>” alt=”<?php the_title(); ?> icon” /></a> <a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a>
<?php endforeach; ?>

You could of course add any number of custom fields using this method and it can be used in countless ways. All you would need to do to add another custom field is change the ($post->ID, “icon”, true) to read ($post->ID, “CustomFieldKey”, true).

I use custom field in the header to show a list of my latest portfolio items with a custom thumbnail, post title and a snippet of what I contributed to the project. A small bit of CSS styling with either method and you are on your way to making your site a more dynamic and more importantly contributing to the overall look and feel. Let me know if you know another way to achieve this, or if this was useful to you and your site.