feature_button.html

<!DOCTYPE html>
<!--[if IE 7]> <html lang="en" class="ie7"> <![endif]-->  
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->  
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->  
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->  
<head>
    <title>Unify | Welcome...</title>

    <!-- Meta -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />

    <!-- CSS Global Compulsory-->
    <link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/css/style.css" />
    <link rel="stylesheet" href="assets/css/headers/header1.css" />
    <link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap-responsive.min.css" />
    <link rel="stylesheet" href="assets/css/style_responsive.css" />
    <link rel="shortcut icon" href="favicon.ico" />        
    <!-- CSS Implementing Plugins -->    
    <link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.css" />
    <!-- CSS Theme -->    
    <link rel="stylesheet" href="assets/css/themes/default.css" id="style_color" />
    <link rel="stylesheet" href="assets/css/themes/headers/default.css" id="style_color-header-1" />    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> 

<body>
<!--=== Style Switcher ===-->    
<i class="style-switcher-btn icon-cogs"></i>
<div class="style-switcher">
    <div class="theme-close"><i class="icon-remove"></i></div>
    <div class="theme-heading">Theme Colors</div>
    <ul class="unstyled">
        <li class="theme-default theme-active" data-style="default" data-header="light"></li>
        <li class="theme-blue" data-style="blue" data-header="light"></li>
        <li class="theme-orange" data-style="orange" data-header="light"></li>
        <li class="theme-red" data-style="red" data-header="light"></li>
        <li class="theme-light" data-style="light" data-header="light"></li>
    </ul>
</div><!--/style-switcher-->
<!--=== End Style Switcher ===-->    

<!--=== Top ===-->    
<div class="top">
    <div class="container">			
        <ul class="loginbar pull-right">
            <li><i class="icon-globe"></i><a>Languages <i class="icon-sort-up"></i></a>
            	<ul class="nav-list">
                	<li class="active"><a href="#">English</a> <i class="icon-ok"></i></li>
                	<li><a href="#">Spanish</a></li>
                	<li><a href="#">Russian</a></li>
                	<li><a href="#">German</a></li>
                </ul>
            </li>	
            <li class="devider">&nbsp;</li>
            <li><a href="page_faq.html" class="login-btn">Help</a></li>	
            <li class="devider">&nbsp;</li>
            <li><a href="page_login.html" class="login-btn">Login</a></li>	
        </ul>
    </div>		
</div><!--/top-->
<!--=== End Top ===-->    

<!--=== Header ===-->
<div class="header">               
    <div class="container"> 
        <!-- Logo -->       
        <div class="logo">                                             
            <a href="index.html"><img id="logo-header" src="assets/img/logo1-default.png" alt="Logo" /></a>
        </div><!-- /logo -->        
                                    
        <!-- Menu -->       
        <div class="navbar">                                
            <div class="navbar-inner">                                  
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a><!-- /nav-collapse -->                                  
                <div class="nav-collapse collapse">                                     
                    <ul class="nav top-2">
                        <li>
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home
                                <b class="caret"></b>                            
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="index.html">Option1: Landing Page</a></li>
                                <li><a href="page_home.html">Option2: Header Option</a></li>
                                <li><a href="page_home4.html">Option3: Revolution Slider</a></li>
                                <li><a href="page_home5.html">Option4: Amazing Content</a></li>
                                <li><a href="page_home1.html">Option5: Mixed Content</a></li>
                                <li><a href="page_home2.html">Option6: Content with Sidebar</a></li>
                                <li><a href="page_home3.html">Option7: Aplle Style Slider</a></li>
                                <li><a href="page_home_all.html">Home All In One</a></li>
                            </ul>
                            <b class="caret-out"></b>                        
                        </li>
                        <li>
                            <a href="" class="dropdown-toggle" data-toggle="dropdown">Pages
                                <b class="caret"></b>                            
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="page_about.html">About Us</a></li>
                                <li><a href="page_services.html">Services</a></li>
                                <li><a href="page_pricing.html">Pricing</a></li>
                                <li><a href="page_coming_soon.html">Coming Soon</a></li>
                                <li><a href="page_faq.html">FAQs</a></li>
                                <li><a href="page_search.html">Search Result</a></li>
                                <li><a href="page_gallery.html">Gallery</a></li>
                                <li><a href="page_registration.html">Registration</a></li>
                                <li><a href="page_login.html">Login</a></li>
                                <li><a href="page_404.html">404</a></li>
                                <li><a href="page_clients.html">Clients</a></li>
                                <li><a href="page_privacy.html">Privacy Policy</a></li>
                                <li><a href="page_terms.html">Terms of Service</a></li>
                                <li><a href="page_column_left.html">2 Columns (Left)</a></li>
                                <li><a href="page_column_right.html">2 Columns (Right)</a></li>
                            </ul>
                            <b class="caret-out"></b>                        
                        </li>
                        <li class="active">
                            <a href="" class="dropdown-toggle" data-toggle="dropdown">Features
                                <b class="caret"></b>                            
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="feature_grid.html">Grid Layout</a></li>
                                <li><a href="feature_typography.html">Typography</a></li>
                                <li><a href="feature_thumbnail.html">Thumbnails</a></li>
                                <li><a href="feature_component.html">Components</a></li>
                                <li><a href="feature_navigation.html">Navigation</a></li>
                                <li><a href="feature_table.html">Tables</a></li>
                                <li><a href="feature_form.html">Forms</a></li>
                                <li><a href="feature_icons.html">Icons</a></li>
                                <li class="active"><a href="feature_button.html">Buttons</a></li>
                            </ul>
                            <b class="caret-out"></b>                        
                        </li>
                        <li>
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Portfolio
                                <b class="caret"></b>                            
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="portfolio.html">Portfolio</a></li>
                                <li><a href="portfolio_item.html">Portfolio Item</a></li>
                                <li><a href="portfolio_2columns.html">Portfolio 2 Columns</a></li>
                                <li><a href="portfolio_3columns.html">Portfolio 3 Columns</a></li>
                                <li><a href="portfolio_4columns.html">Portfolio 4 Columns</a></li>
                            </ul>
                            <b class="caret-out"></b>                        
                        </li>
                        <li>
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog
                                <b class="caret"></b>                            
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="blog.html">Blog</a></li>
                                <li><a href="blog_item.html">Blog Item</a></li>
                                <li><a href="blog_left_sidebar.html">Blog Left Sidebar</a></li>
                                <li><a href="blog_item_left_sidebar.html">Blog Item Left Sidebar</a></li>
                            </ul>
                            <b class="caret-out"></b>                        
                        </li>
                        <li>
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact
                                <b class="caret"></b>                            
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="page_contact.html">Contact Default</a></li>
                                <li><a href="page_contact1.html">Contact Boxed Map</a></li>
                            </ul>
                            <b class="caret-out"></b>                        
                        </li>
                        <li><a class="search"><i class="icon-search search-btn"></i></a></li>                               
                    </ul>
                    <div class="search-open">
                        <div class="input-append">
                            <form />
                                <input type="text" class="span3" placeholder="Search" />
                                <button type="submit" class="btn-u">Go</button>
                            </form>
                        </div>
                    </div>
                </div><!-- /nav-collapse -->                                
            </div><!-- /navbar-inner -->
        </div><!-- /navbar -->                          
    </div><!-- /container -->               
</div><!--/header -->      
<!--=== End Header ===-->

<!--=== Breadcrumbs ===-->
<div class="row-fluid breadcrumbs margin-bottom-20">
	<div class="container">
        <h1 class="pull-left">Buttons</h1>
        <ul class="pull-right breadcrumb">
            <li><a href="index.html">Home</a> <span class="divider">/</span></li>
            <li><a href="">Features</a> <span class="divider">/</span></li>
            <li class="active">Buttons</li>
        </ul>
    </div><!--/container-->
</div><!--/breadcrumbs-->
<!--=== End Breadcrumbs ===-->

<!--=== Content Part ===-->
<div class="container">		
	<div class="row-fluid">
        <!-- Default Buttons -->
        <div class="row-fluid">
        	<div class="headline"><h3>Default buttons</h3></div>
            <p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>a</code> and <code>button</code> elements for the best rendering.</p>
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                    <th>Button</th>
                    <th>class=""</th>
                    <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><button class="btn-u" type="button">Button Default</button></td>
                        <td><code>btn-u</code></td>
                        <td>Default Unify Template button style</td>
                    </tr>
                    <tr>
                        <td><button class="btn-u btn-u-blue" type="button">Button Blue</button></td>
                        <td><code>btn-u btn-u-blue</code></td>
                        <td>New blue button style</td>
                    </tr>
                    <tr>
                        <td><button class="btn-u btn-u-red" type="button">Button Red</button></td>
                        <td><code>btn-u btn-u-red</code></td>
                        <td>New red button style</td>
                    </tr>
                    <tr>
                        <td><button class="btn-u btn-u-orange" type="button">Button Orange</button></td>
                        <td><code>btn-u btn-u-orange</code></td>
                        <td>New orange button style</td>
                    </tr>
                    <tr>
                        <td><button class="btn-u btn-u-sea" type="button">Button Turquoise</button></td>
                        <td><code>btn-u btn-u-sea</code></td>
                        <td>New turquoise button style</td>
                    </tr>
                    <tr>
                        <td><button class="btn-u btn-u-green" type="button">Button Green</button></td>
                        <td><code>btn-u btn-u-green</code></td>
                        <td>New green button style</td>
                    </tr>
                    <tr>
                        <td><button class="btn-u btn-u-yellow" type="button">Button Yellow</button></td>
                        <td><code>btn-u btn-u-yellow</code></td>
                        <td>New yellow button style</td>
                    </tr>                    
                    <tr>
                        <td><button class="btn" type="button">Default</button></td>
                        <td><code>btn</code></td>
                        <td>Standard gray button with gradient</td>
                    </tr>
                    <tr>
                        <td><button class="btn btn-primary" type="button">Primary</button></td>
                        <td><code>btn btn-primary</code></td>
                        <td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
                    </tr>
                    <tr>
                        <td><button class="btn btn-info" type="button">Info</button></td>
                        <td><code>btn btn-info</code></td>
                        <td>Used as an alternative to the default styles</td>
                    </tr>
                    <tr>
                        <td><button class="btn btn-success" type="button">Success</button></td>
                        <td><code>btn btn-success</code></td>
                        <td>Indicates a successful or positive action</td>
                    </tr>
                    <tr>
                        <td><button class="btn btn-warning" type="button">Warning</button></td>
                        <td><code>btn btn-warning</code></td>
                        <td>Indicates caution should be taken with this action</td>
                    </tr>
                    <tr>
                        <td><button class="btn btn-danger" type="button">Danger</button></td>
                        <td><code>btn btn-danger</code></td>
                        <td>Indicates a dangerous or potentially negative action</td>
                    </tr>
                    <tr>
                        <td><button class="btn btn-inverse" type="button">Inverse</button></td>
                        <td><code>btn btn-inverse</code></td>
                        <td>Alternate dark gray button, not tied to a semantic action or use</td>
                    </tr>
                    <tr>
                        <td><button class="btn btn-link" type="button">Link</button></td>
                        <td><code>btn btn-link</code></td>
                        <td>Deemphasize a button by making it look like a link while maintaining button behavior</td>
                    </tr>
                </tbody>
            </table>
        </div><!--/row-fluid-->
		
        <!-- Button Sizes -->
        <div class="headline"><h3>Button Sizes</h3></div>
        <div class="row-fluid">
            <div class="span6">
                <p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.</p>
                <p>
                    <button class="btn btn-large btn-primary" type="button">Large button</button>
                    <button class="btn btn-large" type="button">Large button</button>
                </p>
                <p>
                    <button class="btn btn-primary" type="button">Default button</button>
                    <button class="btn" type="button">Default button</button>
                </p>
                <p>
                    <button class="btn btn-small btn-primary" type="button">Small button</button>
                    <button class="btn btn-small" type="button">Small button</button>
                </p>
                <p>
                    <button class="btn btn-mini btn-primary" type="button">Mini button</button>
                    <button class="btn btn-mini" type="button">Mini button</button>
                </p>                
            </div>
            <div class="span6">
            	<p>Create block level buttons—those that span the full width of a parent— by adding <code>.btn-block</code>.</p>
                <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
                <button class="btn btn-large btn-block" type="button">Block level button</button>                    
            </div>
        </div><!--/row-fluid-->


        <!-- Disabled state -->
        <div class="row-fluid">
        	<div class="span6">
	            <div class="headline"><h3>Disabled state</h3></div>
            	<p>Add the <code>.disabled</code> class to <code>a</code> buttons.</p>
                <p>Add the <code>disabled</code> attribute to <code>button</code> buttons.</p>
                <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
                <a href="#" class="btn btn-large disabled">Link</a>
                <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
                <button type="button" class="btn btn-large" disabled="">Button</button>                    
            </div>

        	<div class="span6">
	            <div class="headline"><h3>One class, multiple tags</h3></div>
				<p>Use the <code>.btn</code> class on an <code>a</code>, <code>button</code>, or <code>input</code> element.</p>
                <p>
                    <a class="btn" href="">Link</a>
                    <button class="btn" type="submit">Button</button>
                    <input class="btn" type="button" value="Input" />
                    <input class="btn" type="submit" value="Submit" />
				</p>                        
				<p>As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code>&lt;input type="submit"&gt;</code> for your button.</p>                                        
            </div>
        </div><!--/row-fluid-->
    </div><!--/row-fluid-->			
</div><!--/container-->		
<!--=== End Content Part ===-->

<!--=== Footer ===-->
<div class="footer">
	<div class="container">
		<div class="row-fluid">
			<div class="span4">
                <!-- About -->
		        <div class="headline"><h3>About</h3></div>	
				<p class="margin-bottom-25">Unify is an incredibly beautiful responsive Bootstrap Template for corporate and creative professionals.</p>	

	            <!-- Monthly Newsletter -->
		        <div class="headline"><h3>Monthly Newsletter</h3></div>	
				<p>Subscribe to our newsletter and stay up to date with the latest news and deals!</p>
				<form class="form-inline" />
					<div class="input-append">
						<input type="text" placeholder="Email Address" class="input-medium" />
						<button class="btn-u">Subscribe</button>
					</div>
				</form>							
			</div><!--/span4-->	
			
			<div class="span4">
                <div class="posts">
                    <div class="headline"><h3>Recent Blog Entries</h3></div>
                    <dl class="dl-horizontal">
                        <dt><a href="#"><img src="assets/img/sliders/elastislide/6.jpg" alt="" /></a></dt>
                        <dd>
                            <p><a href="#">Anim moon officia Unify is an incredibly beautiful responsive Bootstrap Template</a></p> 
                        </dd>
                    </dl>
                    <dl class="dl-horizontal">
                    <dt><a href="#"><img src="assets/img/sliders/elastislide/10.jpg" alt="" /></a></dt>
                        <dd>
                            <p><a href="#">Anim moon officia Unify is an incredibly beautiful responsive Bootstrap Template</a></p> 
                        </dd>
                    </dl>
                    <dl class="dl-horizontal">
                    <dt><a href="#"><img src="assets/img/sliders/elastislide/11.jpg" alt="" /></a></dt>
                        <dd>
                            <p><a href="#">Anim moon officia Unify is an incredibly beautiful responsive Bootstrap Template</a></p> 
                        </dd>
                    </dl>
                </div>
			</div><!--/span4-->

			<div class="span4">
	            <!-- Monthly Newsletter -->
		        <div class="headline"><h3>Contact Us</h3></div>	
                <address>
					25, Lorem Lis Street, Orange <br />
					California, US <br />
					Phone: 800 123 3456 <br />
					Fax: 800 123 3456 <br />
					Email: <a href="mailto:info@anybiz.com" class="">info@anybiz.com</a>
                </address>

                <!-- Stay Connected -->
		        <div class="headline"><h3>Stay Connected</h3></div>	
                <ul class="social-icons">
                    <li><a href="#" data-original-title="Feed" class="social_rss"></a></li>
                    <li><a href="#" data-original-title="Facebook" class="social_facebook"></a></li>
                    <li><a href="#" data-original-title="Twitter" class="social_twitter"></a></li>
                    <li><a href="#" data-original-title="Goole Plus" class="social_googleplus"></a></li>
                    <li><a href="#" data-original-title="Pinterest" class="social_pintrest"></a></li>
                    <li><a href="#" data-original-title="Linkedin" class="social_linkedin"></a></li>
                    <li><a href="#" data-original-title="Vimeo" class="social_vimeo"></a></li>
                </ul>
			</div><!--/span4-->
		</div><!--/row-fluid-->	
	</div><!--/container-->	
</div><!--/footer-->	
<!--=== End Footer ===-->

<!--=== Copyright ===-->
<div class="copyright">
	<div class="container">
		<div class="row-fluid">
			<div class="span8">						
	            <p>2013 &copy; Unify. ALL Rights Reserved. <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
			</div>
			<div class="span4">	
				<a href="index.html"><img id="logo-footer" src="assets/img/logo2-default.png" class="pull-right" alt="" /></a>
			</div>
		</div><!--/row-fluid-->
	</div><!--/container-->	
</div><!--/copyright-->	
<!--=== End Copyright ===-->

<!-- JS Global Compulsory -->           
<script type="text/javascript" src="assets/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="assets/js/modernizr.custom.js"></script>        
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script> 
<!-- JS Implementing Plugins -->           
<script type="text/javascript" src="assets/plugins/back-to-top.js"></script>
<!-- JS Page Level -->           
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        App.init();
    });
</script>
<!--[if lt IE 9]>
    <script src="assets/js/respond.js"></script>
<![endif]-->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-47920049-1', 'yololabs.github.io');
  ga('send', 'pageview');

</script>
</body>
</html> 