blogfreakz.com » Buttons

How to Create YouTube Popup Buttons with CSS

Keith@Blogfreakz — Fri, 03 Feb 2012 11:53:12 +0000

Here’s a very cool CSS trick I found that will let you have the same buttons as those in YouTube’s footer! But first, lots of thanks to the following coders below:

Dennis Sa - for the jsbin of the matte buttons http://jsbin.com/efesot/6
Trevor Gerzen – for applying the transitions, and
Chris Coyier – for coming up with this neat trick and sharing it on the web.

HTML

As for the base styles for all three states (default, hover, active):

CSS

.button {

border: 1px solid #DDD;

border-radius: 3px;

text-shadow: 0 1px 1px white;

-webkit-box-shadow: 0 1px 1px #fff;

-moz-box-shadow: 0 1px 1px #fff;

box-shadow: 0 1px 1px #fff;

font: bold 11px Sans-Serif;

padding: 6px 10px;

white-space: nowrap;

vertical-align: middle;

color: #666;

background: transparent;

cursor: pointer;

}

.button:hover, .button:focus {

border-color: #999;

background: -webkit-linear-gradient(top, white, #E0E0E0);

background: -moz-linear-gradient(top, white, #E0E0E0);

background: -ms-linear-gradient(top, white, #E0E0E0);

background: -o-linear-gradient(top, white, #E0E0E0);

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;

-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;

box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;

}

.button:active {

border: 1px solid #AAA;

border-bottom-color: #CCC;

border-top-color: #999;

-webkit-box-shadow: inset 0 1px 2px #aaa;

-moz-box-shadow: inset 0 1px 2px #aaa;

box-shadow: inset 0 1px 2px #aaa;

background: -webkit-linear-gradient(top, #E6E6E6, gainsboro);

background: -moz-linear-gradient(top, #E6E6E6, gainsboro);

background: -ms-linear-gradient(top, #E6E6E6, gainsboro);

background: -o-linear-gradient(top, #E6E6E6, gainsboro);

}

NOTE: This is short tutorial just teaches you how to mimic the look and not the function. So if you want to be able to include menu functionality on the buttons (like YouTube does) you can check out this link and try incorporating the code there with the one here.

Demo

Download Files

Incoming search terms for the article:

How to add a Facebook “Like” button to your WordPress Blogs

Nancy — Thu, 18 Aug 2011 18:24:45 +0000

Now, it is easier than ever to add the Facebook famous “Like”/”Recommend” to your posts and increase your blog popularity. The “Like” button allows users to share their ‘like’ of your WordPress Blog with their friends on Facebook.

Every time a user clicks on the “Like” button on your blog, it creates a status update on the user’s Facebook News Feed with a link back to your WordPress Blog.

Here is how you do it:

1. Login as administrator to the WordPress admin panel.

2. Go to Appearance -> Editor.

3. Place the following code wherever you want the like button to appear:

ID)); ?>&layout=standard&show_faces=false&width=350&action=like&colorscheme=light” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; overflow:hidden; width:350px; height:25px”>

4. Save the changes, and the final result should look like this:

Incoming search terms for the article:

Minimal Portfolio Site Layout Free PSD

Mufti Ali — Sat, 18 Jun 2011 13:27:15 +0000

Today we are excited to release a new freebie resource. A simple, professional and minimal portfolio site layout. We are releasing this free resource in a fully layered PSD file. This stylish resource is offered exclusively on ahmadhania.com

Incoming search terms for the article:

Dark Menu Free PSD

Mufti Ali — Sat, 28 May 2011 10:21:56 +0000

Today we are excited to release a new freebie resource. A free simple website dark menu. We are releasing this free resource in a fully layered PSD file. This resource is offered exclusively on ahmadhania.com

Free Chunky 3D Web Buttons (PSD)

Mufti Ali — Mon, 11 Apr 2011 15:37:25 +0000

3d web buttons are very popular recently . Premiumpixels is sharing free set of 3D web button that you can use for Your web design project.

The download (PSD) includes a variety of colours and adding your own is a simple process. With this download all the hard work is done for you as the buttons include a normal, hover and active state.

Website: http://www.premiumpixels.com/freebies/chunky-3d-webbuttons-psd

Incoming search terms for the article:

Select 2 Buttons – An Alternative Way To Displaying Standard HTML Selects

Mufti Ali — Wed, 16 Mar 2011 13:39:25 +0000

Select2Buttons is a jQuery plugin that provides an alternative to the standard html select. The plugin converts selects into a series of button like elements, and if used correctly can provide a better visual representation of the options available to a user.

To implement this plugin is pretty simple. Add a standard select to the page and then make 1 jQuery call to convert it into buttons:

It has several options for customization, such as js change callbacks, disabled options, disabled selects, OptGroups and allows no default selection (like threadless).

Requirements: jQuery Framework
Demo: http://o-sam-o.github.com/select2Buttons
License: MIT License

Incoming search terms for the article:

CSS3 Buttons – GitHub Style Button

Mufti Ali — Sun, 20 Feb 2011 19:47:25 +0000

CSS3 buttons is a simple framework to create good-looking GitHub style button links. This framework allow us to create pill-like button with more rounded corners, by add a .pill class to the button. Sometimes when you have multiple buttons, it’s a good thing to highlight the button with the primary action in order to give the user a visual clue of what action to take if in doubt. This can be accomplished by adding a .primary class to the button.

If you have a button that triggers a negative action, like deleting data, it’s good practice to warn the user by styling the button differently than the normal buttons. Give a button the class .negative and the hover-state will change from blue to red. You can also create grouped buttons that are linked together, like seen at Gmail and other places, by using the .left, .middle and .right classes.

CSS3 Buttons supports a wide range of icons that can easily be added to any button by adding a span tag inside the anchor tag with the class of .icon and any one of the provided icon classes. CSS3 Buttons works in all major browsers. Some CSS3 features used in CSS3 Buttons is not supported in Internet Explorer browsers!

Requirements:-
Demo: http://css3buttons.michaelhenriksen.dk
License: Unlicense

Incoming search terms for the article:

10 Simple Web Buttons in PSD Format

Mufti Ali — Sun, 12 Dec 2010 16:10:10 +0000

Premiumpixels is sharing 10 Simple Web Buttons in PSD format. Designed in 10 different colours, these little buttons should fit into almost all web layouts. If they don’t, then just a few tweaks to the PSD and you’re done.

The download includes the editable PSD. All files are free for personal and commercial use, no attribution necessary, but certainly appreciated! Re-sale or re-distribution is prohibited.

Source : http://www.premiumpixels.com/10-simple-web-buttons-psd/

Incoming search terms for the article:

How To Create CSS3 Animated Bubble Buttons

Mufti Ali — Mon, 04 Oct 2010 03:00:37 +0000

Tutorialzine is sharing tutorial how to create a useful set of animated buttons with the power of CSS3 multiple backgrounds and animations. With this button pack, you can easily turn any link on your page into an animated button by just assigning a class name. No JavaScript necessary. Four color themes and three sizes are also available by assigning additional class names.

To turn a regular link on your page into a fancy animated CSS3 button, you just need to assign the .button class and one of the supported colors.

Website: http://tutorialzine.com/2010/10/css3-animated-bubble-buttons

Incoming search terms for the article:

BonBon – Impressive CSS3 Button

Mufti Ali — Fri, 03 Sep 2010 03:01:00 +0000

BobBon is impressive and attractive CSS3 button that make use of CSS3 features. The Goal is Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible. BonBon Buttons named after the French word for “Candy“.

If you would like to add an icon, you can use the HTML5 custom data attribute like this: data-icon="S". This allows you to use any of the Unicode symbols or the newly released Picos Font as icons.

This is just a demo and not meant to be used on your next project that targets the average internet user. It’s just wanted to show a couple techniques how to use some of the new CSS3/HTML5 features. So only the current version of Safari, Chrome and Firefox are supported.

Website: http://lab.simurai.com/css/buttons