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 Display your yahoo messenger online status on your blog

Nancy — Tue, 06 Sep 2011 21:52:30 +0000

How to Display your Yahoo Messenger Online status on your Blog

Ever visited a blog, and wish you can IM that blogger right away to ask a quick question? Well… now you can!

This little widget allows you to alert your readers when you are signed on, and ready for quicky conversations on Yahoo Messengner. This is just another great way for you to keep in touch with your readers!

By signing into your yahoo messenger application, it will automatically show your Yahoo Online status in your blog.

Below is the tutuorial how to set this up:

1. Login into your blog dashboard and add Gadget / Wideget HTML / Javascript.

2. Copy and Paste this code below:

3. Change “your-yahoo-id” to your Yahoo Messenger UserID

4. Save your Gadget

5. You also can customize the Yahoo Messenger Status Icon in your blog, by simply changing number in t=1 to the number that you want.

Note: t number range 1 to 24

Below is the Yahoo Messenger Status Icon broken down in sets of 5

Code t=1 thru t=5 Code t=6 thru t=10

Code t=11 thru t=15 Code t=16 thru t=20

Code t=21 thru t=24

Enjoy!

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:

CSS3 Facebook Buttons

Mufti Ali — Wed, 04 May 2011 13:18:48 +0000

Nicolas Gallagher, front-end developer is create simple CSS to recreate the appearance of Facebook’s buttons. This button help us to create facebook alike basic buttons, larger buttons, grouped buttons, grouped buttons and buttons with icons.

The buttons full support for Firefox 3.5+, Google Chrome, Safari 4+, IE 9+, Opera 11.10+. Some CSS3 enhancements are not supported in older versions of Opera and IE. The use of icons is not supported in IE 6 or IE 7.

Requirements: -
Demo: http://nicolasgallagher.com/lab/css3-facebook-buttons/
License: Public Domain License

Incoming search terms for the article:

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:

Free Slick Modern Buttons PSD

Mufti Ali — Sun, 03 Apr 2011 09:55:26 +0000

Supratim, an Electronics and Communication Engineering student in India is sharing free set of modern 9 web buttons that you can use in website interfaces, call-to-action buttons, web forms, etc. The PSD file is organized and can be easily modified to suit your needs.

This web button is free to user for commercial and personal projects under Freebie Files Usage Terms, but you are not allowed to redistribute or sell files, attribution encouraged.

Website: http://designinstruct.com/free-resources/psds/slick-modern-buttons-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:

How to Make Apple Website Alike Button With CSS3

Mufti Ali — Sun, 16 Jan 2011 17:12:39 +0000

High-quality interface elements are a great way to add that extra bit of refinement to a website. Thoughtbot, a web design and development agency in Boston is sharing tutorial, how to building the button that Peter Vidani recently named 2010 Button of the Year. As you can see, they are aiming for an almost exact reproduction of the image-based button that appears on the Apple website.

When designing buttons and other interface elements, it’s important to be consistent about where the light source on your page is coming from. If you look at the button they’re building, you can see that the light source is coming from directly overhead. This means there is a slight highlight at the top edge of the button, the background color goes from lightest at the top to darkest at the bottom, and there is a slight shadow underneath the button. They are using CSS3 background gradients for Mozilla and WebKit, with a solid color for all other browsers.

Source: http://robots.thoughtbot.com/post/2718077289/make-css3-buttons-like-a-boss

Incoming search terms for the article:

We Love Buttons- Beautiful WebKit CSS3 Button

Mufti Ali — Tue, 04 Jan 2011 22:08:25 +0000

We Love Button is CSS project from Pico and friends. There are about 35 buttons and most of them only works in WebKit browsers This library of sorts allows you to easily get beautiful buttons in WebKit browsers. The markup is almost sexier than the buttons themselves.

These are easy to use. Simply download our master stylesheet, include it, and copy and paste the markup under each button anywhere in your document. Simple!. All of these are free to use these for anything, but they come with no warranty or guarantees.

Requirements: Webkit Browser
Demo: http://www.wearepico.com/buttons/
License: Free License