Blogfreakz - Web Design and Web Development resources » Buttons http://blogfreakz.com A site dedicated to keeping up with the latest trends on Web Design Thu, 17 May 2012 00:27:50 +0000 en hourly 1 http://wordpress.org/?v=3.1.4 Create Eye-Catching CSS Buttons With Pseudo-Elements http://blogfreakz.com/tutorial/create-eye-catching-css-buttons-with-pseudo-elements/ http://blogfreakz.com/tutorial/create-eye-catching-css-buttons-with-pseudo-elements/#comments Thu, 10 May 2012 03:33:37 +0000 Keith@Blogfreakz http://blogfreakz.com/?p=27299 Today’s featured CSS tutorial comes from Sergio Camalich who created a very cool set of button designs with the use of CSS pseudo-elements. His tutorial shows you how to create buttons with a twist. It will only involve using just one anchor tag for each button to work (with the help of CSS), because you’ll be creating the other elements with the ::before pseudo-class.

Sergio created five different button styles using this one approach but I’m only going to show you just one of them, which actually happens to be my favorite one. If you like to see the rest of the styles, you can check them out on his dribble page.

The button that we’re going to create will look like this:

css buttons Create Eye Catching CSS Buttons With Pseudo ElementsClick on the image for the demo.

We’ll keep our HTML markup as short and simple as possible with this:

<a href="#">
Click me!
 </a>

And now for the magic of CSS:

.a_demo_three {
background-color:#3bb3e0;
font-family: 'Open Sans', sans-serif;
font-size:12px;
text-decoration:none;
color:#fff;
position:relative;
padding:10px 20px;
border-left:solid 1px #2ab7ec;
margin-left:35px;
background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
}
.a_demo_three:active {
top:3px;
background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}
.a_demo_three::before {
content:"·";
width:35px;
max-height:29px;
height:100%;
position:absolute;
display:block;
padding-top:8px;
top:0px;
left:-36px;
font-size:16px;
font-weight:bold;
color:#8fd1ea;
text-shadow:1px 1px 0px #07526e;
border-right:solid 1px #07526e;
background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
}
.a_demo_three:active::before {
top:-3px;
box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
 }

Incoming search terms for the article:

]]> http://blogfreakz.com/tutorial/create-eye-catching-css-buttons-with-pseudo-elements/feed/ 0 5 Fantastic HTML5 and CSS3 Snippets for Your Website http://blogfreakz.com/web-design/5-fantastic-html5-and-css3-snippets-for-your-website/ http://blogfreakz.com/web-design/5-fantastic-html5-and-css3-snippets-for-your-website/#comments Thu, 23 Feb 2012 08:14:10 +0000 Keith@Blogfreakz http://blogfreakz.com/?p=25469 Here’s a shortlist of five simple yet cool HTML5 effects that can add life to your website! No images and JavaScript are necessary, as all of them are accomplished using only a combination of HTML5 and CSS3.

1. CSS3 Loading Animation

A very basic loading animation.

Loading Animation 5 Fantastic HTML5 and CSS3 Snippets for Your Website

CSS code:

<style type='text/css'>
@-webkit-keyframes rotate {
from {
-webkit-transform:   rotate(0deg);
}
to {
-webkit-transform:   rotate(360deg);
}
}
#loading {
border: 1px solid #000;
border-right: 0;
border-bottom: 0;
-webkit-border-radius:   100px;
height: 100px;
width: 100px;
margin: 100px;
-webkit-transition: all   0.5s ease-in;
-webkit-animation-name:               rotate;
-webkit-animation-duration:           1.0s;
-webkit-animation-iteration-count:    infinite;
-webkit-animation-timing-function: linear;
}
</style>

HTML code:

<body>
<div id="loading"></div>
</body>

2. Twitter-inspired Glowing Input Box

The input box glows when you click on it. However, it only works on the latest browser versions (Firefox 4+, IE9, etc.).

Glowing Input Box 5 Fantastic HTML5 and CSS3 Snippets for Your Website

 

 

CSS code:

<style>
input{
font-size:18px;
font-family: helvetica;
}
input {
outline:none;
transition: all 0.25s   ease-in-out;
-webkit-transition: all   0.25s ease-in-out;
-moz-transition: all 0.25s   ease-in-out;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border:1px solid   rgba(0,0,0, 0.2);
color:gray;
background-color:#eee;
padding: 3px;
}
input:focus {
box-shadow: 0 0 15px green;
-webkit-box-shadow: 0 0   15px green;
-moz-box-shadow: 0 0 15px   green;
border:1px solid green;
background-color:white;
}
body{
background-color: #FFF;
color:gray;
font-family:Arial;
}
</style>

HTML code:

<div>
Username <input   type="text" name="username"   placeholder="username">
</div>

 

3. Blur/Unblur Text Effect On Hover

This uses CSS3 transitions and text shadow with transparent color that creates a blurred text effect.

Blur and Unblur 5 Fantastic HTML5 and CSS3 Snippets for Your Website

 

 

 

 

CSS code:

<style>
.hover_blur{
font-size:35px;
font-family: helvetica;
transition: all 0.25s   ease-in-out;
-moz-transition: all 0.25s   ease-in-out;
-webkit-transition: all   0.25s ease-in-out;
color:black;
}
.hover_blur:hover{
color:transparent;
text-shadow: black 0 0   100px;
}
.hover_unblur{
font-size:35px;
font-family: helvetica;
transition: all 0.25s   ease-in-out;
-moz-transition: all 0.25s   ease-in-out;
-webkit-transition: all   0.25s ease-in-out;
text-shadow: black 0 0   30px;
color:transparent;
}
.hover_unblur:hover{
color:black;
text-shadow: black 0 0 0px;
}
body{
background-color: #FFF;
color:gray;
font-family:Arial;
}
</style>

HTML code:

<h1>Hover To Blur</h1>
<h1>Hover To Unblur</h1>

 

4. Fluid Horizontal Navigation (CSS3 Flexbox)

This is a simple yet fluid horizontal navigation menu that uses the CSS3 Flexible Box model.

Flexbox 5 Fantastic HTML5 and CSS3 Snippets for Your Website

 

 

 

 

 

 

 

CSS code:

<style type="text/css">
.container{
display:block;
float:left;
min-width:500px;
resize:both;
overflow:auto;
height:300px;
border:1px solid black;
background:rgba(0,0,0,.1);
}
nav{
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
box-orient:horizontal;
border:2px solid #333;
-webkit-border-radius:6px;
-moz-border-radius:6px;
-o-border-radius:6px;
border-radius:6px;
width: 95%;
margin:20px auto;
background:white;
}
nav a{
display:block;
color:#333;
padding:10px;
-webkit-box-flex:1;
-moz-box-flex:1;
box-flex:1;
text-align:center;
text-decoration:none;
-webkit-transition:all .4s   linear;
-moz-transition:all .4s linear;
-o-transition:all .4s linear;
transition:all .4s linear;
}
a:hover {
background-color:   rgba(0,0,0,.2);
}
a:active {
background-color: #333;
-webkit-box-shadow: inset 0   2px 8px hsla( 0, 0%, 0%, 0.6 );
-moz-box-shadow: inset 0   2px 8px hsla( 0, 0%, 0%, 0.6 );
-o-box-shadow: inset 0   2px 8px hsla( 0, 0%, 0%, 0.6 );
box-shadow: inset 0   2px 8px hsla( 0, 0%, 0%, 0.6 );
color:white;
}
p{
margin:20px;
}
</style>

HTML code:

<div>
<nav>
<a   href="#">Home</a>
<a   href="#">About</a>
<a   href="#">Contact</a>
<a   href="#">Rock &amp; Roll</a>
<a   href="#">Waffles</a>
</nav>
<p>Resize the Window</p>
</div>

 

5. Animated Button

Originally created by Dan Cederholm, this button’s extra-smooth animation is way better than your typical image swap effect!

Animated Button 5 Fantastic HTML5 and CSS3 Snippets for Your Website

 

 

 

CSS code:

<style type="text/css">
body {
padding: 2em 5em;
font-family:   "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 250%;
background: #eee;
}
a:link, a:visited {
text-decoration: none;
color: #fff;
border: none;
}
a img {
border: none;
}
div.mod {
margin: 0 0 30px 0;
padding: 80px;
text-align: center;
background: #fff;
-webkit-border-radius:   10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 0 3px   rgba(0, 0, 0, .1);
-moz-box-shadow: 0 0 3px   rgba(0, 0, 0, .1);
box-shadow: 0 0 3px rgba(0,   0, 0, .1);
}
p.notes {
margin: 0 0 10px 0;
font-size: 13px;
line-height: 1.4;
color: #999;
text-align: center;
}
p.notes a {
font-weight: bold;
color: #777;
border-bottom: 1px solid   #ccc;
-webkit-transition: color .2s   ease;
-moz-transition: color .2s   ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
p.notes a:hover {
color: #555;
}
p.notes span {
margin: 0 4px;
color: #ccc;
}
#stamp {
display: block;
margin: 20px 0;
border: none;
-webkit-transition: opacity   .2s ease;
-moz-transition: opacity .2s   ease;
-o-transition: opacity .2s   ease;
transition: opacity .2s ease;
}
#stamp:hover {
opacity: .7;
}
/* button styles */
.btn {
display: inline-block;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow:
0 8px 0 #1a74a1,  0 15px 20px rgba(0, 0, 0, .35);
-moz-box-shadow:
0 8px 0 #1a74a1,  0 15px 20px rgba(0, 0, 0, .35);
box-shadow:
0 8px 0 #1a74a1,  0 15px 20px rgba(0, 0, 0, .35);
-webkit-transition:   -webkit-box-shadow .2s ease-in-out;
-moz-transition:   -moz-box-shadow .2s ease-in-out;
-o-transition: -o-box-shadow   .2s ease-in-out;
transition: box-shadow .2s   ease-in-out;
}
.btn span {
display: inline-block;
padding: 10px 20px;
font-family:   "cooper-black-std-1", "cooper-black-std-2", Helvetica,   Arial, sans-serif;
line-height: 1;
text-shadow: 0 -1px 1px   rgba(19, 65, 88, .8);
background: #3194c6;
background:   -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3194c6), to(#5bacd6));
background:   -moz-linear-gradient(#3194c6, #5bacd6);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: inset 0   -1px 1px rgba(255, 255, 255, .15);
-moz-box-shadow: inset 0   -1px 1px rgba(255, 255, 255, .15);
box-shadow: inset 0 -1px   1px rgba(255, 255, 255, .15);
-webkit-transition:   -webkit-transform .2s ease-in-out;
-moz-transition:   -moz-transform .2s ease-in-out;
-o-transition: -o-transform   .2s ease-in-out;
transition: transform .2s   ease-in-out;
}
.btn:active {
-webkit-box-shadow:
0 8px 0 #1a74a1,  0 12px 10px rgba(0, 0, 0, .3);
-moz-box-shadow:
0 8px 0 #1a74a1,  0 12px 10px rgba(0, 0, 0, .3);
box-shadow:
0 8px 0 #1a74a1,  0 12px 10px rgba(0, 0, 0, .3);
-webkit-transition: -webkit-transform 0s   ease-in-out;
-moz-transition:   -moz-transform 0s ease-in-out;
-o-transition: -o-transform   0s ease-in-out;
transition: transform 0s   ease-in-out;
}
.btn:active span {
-webkit-transform:   translate(0, 4px);
-moz-transform:   translate(0, 4px);
-o-transform: translate(0,   4px);
transform: translate(0,   4px);
-webkit-transition:   -webkit-transform 0s ease-in-out;
-moz-transition:   -moz-transform 0s ease-in-out;
-o-transition: -o-transform   0s ease-in-out;
transition: transform 0s   ease-in-out;
}
</style>

HTML code:

<div>
<a href="#"  ><span>Press this!</span></a>
</div>

Incoming search terms for the article:

]]> http://blogfreakz.com/web-design/5-fantastic-html5-and-css3-snippets-for-your-website/feed/ 0 8 Valentine-Inspired Social Media Icon Designs http://blogfreakz.com/web-design/8-valentine-inspired-social-media-icon-designs/ http://blogfreakz.com/web-design/8-valentine-inspired-social-media-icon-designs/#comments Sat, 11 Feb 2012 15:10:21 +0000 Keith@Blogfreakz http://blogfreakz.com/?p=25083 It’s almost Valentine’s Day so I’m sharing a way for you and your site visitors to show some love with these 8 nicely designed Valentine-inspired social media icons.

Then again, who says you can only apply these designs during Valentine’s Day? Some of these are good enough to be a permanent part of your site, depending on the theme of course. Here they are in no particular order:

Heart V2 (39 icons)

Heart V2 289x250 8 Valentine Inspired Social Media Icon DesignsDownload | Preview

 

Heart Social Icons (12 icons)

Heart Social icons 377x250 8 Valentine Inspired Social Media Icon DesignsDownload

 

Kiss Social Bookmark Icons (8 icons)

Kiss Social Icons 383x250 8 Valentine Inspired Social Media Icon DesignsDownload

 

Chococons (12 icons)

Chococons 427x250 8 Valentine Inspired Social Media Icon DesignsDownload (ICO) for Windows | Download (DMG) for Mac | Download (PNG)

 

St. Valentine’s Day Social Media Icons (12 icons)

St Valentines Day social media icons 597x250 8 Valentine Inspired Social Media Icon DesignsDownload

 

Typical “Kikay” Social Icons (14 icons)

Typical Kikay social icons 479x250 8 Valentine Inspired Social Media Icon DesignsDownload

 

Conversation Hearts (6 icons)

Conversation Hearts 8 Valentine Inspired Social Media Icon DesignsDownload

 

IconText to WebDev Valentine’s Day Icon Pack (5 icons)

IconText to WebDev 290x250 8 Valentine Inspired Social Media Icon DesignsDownload

 

Incoming search terms for the article:

]]> http://blogfreakz.com/web-design/8-valentine-inspired-social-media-icon-designs/feed/ 0 How to Create YouTube Popup Buttons with CSS http://blogfreakz.com/web-design/how-to-create-youtube-popup-buttons-with-css/ http://blogfreakz.com/web-design/how-to-create-youtube-popup-buttons-with-css/#comments Fri, 03 Feb 2012 11:53:12 +0000 Keith@Blogfreakz http://blogfreakz.com/?p=24819 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.

 

114 285x117 How to Create YouTube Popup Buttons with CSS

 

HTML

<button role=”button”>

Button #1

</button>

 

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:

]]> http://blogfreakz.com/web-design/how-to-create-youtube-popup-buttons-with-css/feed/ 0 How to Display your yahoo messenger online status on your blog http://blogfreakz.com/others/how-to-display-your-yahoo-messenger-online-status-on-your-blog/ http://blogfreakz.com/others/how-to-display-your-yahoo-messenger-online-status-on-your-blog/#comments Tue, 06 Sep 2011 21:52:30 +0000 Nancy http://blogfreakz.com/?p=21916 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:

yahoo code How to Display your yahoo messenger online status on your blog

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

yahoo 1 5 How to Display your yahoo messenger online status on your blogyahoo 6 10 How to Display your yahoo messenger online status on your blog

 

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

yahoo 11 15 How to Display your yahoo messenger online status on your blog yahoo 16 20 How to Display your yahoo messenger online status on your blog

Code t=21 thru t=24

yahoo 21 24 How to Display your yahoo messenger online status on your blog

 

Enjoy!


Incoming search terms for the article:

]]> http://blogfreakz.com/others/how-to-display-your-yahoo-messenger-online-status-on-your-blog/feed/ 2 How to add a Facebook “Like” button to your WordPress Blogs http://blogfreakz.com/others/how-to-add-a-facebook-like-button-to-your-wordpress-blogs/ http://blogfreakz.com/others/how-to-add-a-facebook-like-button-to-your-wordpress-blogs/#comments Thu, 18 Aug 2011 18:24:45 +0000 Nancy http://blogfreakz.com/?p=21539

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.

Appearance Editor How to add a Facebook Like button to your WordPress Blogs

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

<iframe src=”http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show_faces=false&amp;width=350&amp;action=like&amp;colorscheme=light” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; overflow:hidden; width:350px; height:25px”></iframe>

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

facebook like How to add a Facebook Like button to your WordPress Blogs

Incoming search terms for the article:

]]> http://blogfreakz.com/others/how-to-add-a-facebook-like-button-to-your-wordpress-blogs/feed/ 1 CSS3 Facebook Buttons http://blogfreakz.com/button/css3-facebook-buttons/ http://blogfreakz.com/button/css3-facebook-buttons/#comments Wed, 04 May 2011 13:18:48 +0000 Mufti Ali http://blogfreakz.com/?p=19673 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.

facebook butons CSS3 Facebook Buttons

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:

]]> http://blogfreakz.com/button/css3-facebook-buttons/feed/ 0 Free Chunky 3D Web Buttons (PSD) http://blogfreakz.com/photoshop-tutorial/free-chunky-3d-web-buttons-psd/ http://blogfreakz.com/photoshop-tutorial/free-chunky-3d-web-buttons-psd/#comments Mon, 11 Apr 2011 15:37:25 +0000 Mufti Ali http://blogfreakz.com/?p=18571 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.

3d web button Free Chunky 3D Web Buttons (PSD)

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:

]]> http://blogfreakz.com/photoshop-tutorial/free-chunky-3d-web-buttons-psd/feed/ 0 Free Slick Modern Buttons PSD http://blogfreakz.com/photoshop-tutorial/free-slick-modern-buttons-psd/ http://blogfreakz.com/photoshop-tutorial/free-slick-modern-buttons-psd/#comments Sun, 03 Apr 2011 09:55:26 +0000 Mufti Ali http://blogfreakz.com/?p=18324 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.

psd buttons Free Slick Modern Buttons PSD

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:

]]> http://blogfreakz.com/photoshop-tutorial/free-slick-modern-buttons-psd/feed/ 0 Select 2 Buttons – An Alternative Way To Displaying Standard HTML Selects http://blogfreakz.com/jquery/select-2-buttons-an-alternative-way-to-displaying-standard-html-selects/ http://blogfreakz.com/jquery/select-2-buttons-an-alternative-way-to-displaying-standard-html-selects/#comments Wed, 16 Mar 2011 13:39:25 +0000 Mufti Ali http://blogfreakz.com/?p=17500 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.

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

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:

<script>
   $('select[name=simple-select]').select2Buttons();
</script>

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:

]]> http://blogfreakz.com/jquery/select-2-buttons-an-alternative-way-to-displaying-standard-html-selects/feed/ 0