CSS3 YouTube Buttons

Buttons

The "buttons" can be created by adding class="yt-button" to any appropriate <a>, <button>, or <input> element. Add a further class of pill to create a pill-like button. Add a further class of primary, dark, danger or big to emphasise more important actions.

<a class="ytbutton">Default (link)</a>

<input class="yt-button" type="button" value="Default (input)">

<button class="yt-button">Default (button)</button>

Default (link)

<button class="yt-button pill">Pill button)</button>

<button class="yt-button active">Active button</button>

<button class="yt-button" disabled>Disabled button</button>

or

<button class="yt-button disabled">Disabled button</button>

<button class="yt-button primary">Primary button</button>

<button class="yt-button dark">Dark button</button>

More classy on a dark backgroud like #424242 :

<button class="yt-button danger">Danger</button>

<button class="yt-button big">Big button</button>

Of course, all those classes are culmulables.

<button class="yt-button primary big pill" disabled>Button</button>

Grouped buttons

Groups of buttons can be created by wrapping them in an element given a class of yt-button-group.

<div class="yt-button-group">
	<button class="yt-button">Foo</button>
	<button class="yt-button">Bar</button>
	<button class="yt-button">Foobar</button>
</div>

or

<div class="yt-button-group">
	<input type="button" class="yt-button" value="Foo" />
	<input type="button" class="yt-button" value="Bar" />
	<input type="button" class="yt-button" value="Foobar" />
</div>

or

<div class="yt-button-group">
	<a class="yt-button">Foo</a>
	<a class="yt-button">Bar</a>
	<a class="yt-button">Foobar</a>
</div>

or even

<ul class="yt-button-group">
	<li><a class="yt-button">Foo</a></li>
	<li><a class="yt-button">Bar</a>
	<li><a class="yt-button">Foobar</a></li>
</ul>

<button class="yt-button pill primary">Primary</button>

<div class="yt-button-group">
	<button class="yt-button pill active">Foo</button>
	<button class="yt-button">Bar</button>
	<button class="yt-button pill danger disabled">Foobar</button>
</div>

or

<div class="yt-button-group pill">
	<button class="yt-button active">Foo</button>
	<button class="yt-button">Bar</button>
	<button class="yt-button danger disabled">Foobar</button>
</div>

Browser compatibility

Firefox 3.5+, Google Chrome, Safari 4+, IE 8+, Opera 10+.

Note: Some CSS3 features are not supported in older versions of Opera and versions of Internet Explorer prior to IE 8.

License

Public domain: http://unlicense.org/

Acknowledgements

Inspired by Nicolas Gallagher's CSS3 GitHub Buttons.