golden hour
/home/phakp/public_html/bkp_full/old_site_bkp/admin/application/views/main_temp
⬆️ Go Up
Upload
File/Folder
Size
Actions
404.html
1.29 KB
Del
OK
500.html
1.03 KB
Del
OK
activity_stream.html
52.95 KB
Del
OK
agile_board.html
38.37 KB
Del
OK
article.html
35.14 KB
Del
OK
badges_labels.html
31.69 KB
Del
OK
basic_gallery.html
34.77 KB
Del
OK
blog.html
40.65 KB
Del
OK
buttons.html
55.34 KB
Del
OK
c3.html
30.5 KB
Del
OK
calendar.html
29.28 KB
Del
OK
carousel.html
34.58 KB
Del
OK
chat_view.html
33.94 KB
Del
OK
clients.html
111.63 KB
Del
OK
clipboard.html
27.31 KB
Del
OK
code_editor.html
27.03 KB
Del
OK
contacts.html
38.73 KB
Del
OK
contacts_2.html
38.04 KB
Del
OK
css_animation.html
35.78 KB
Del
OK
dashboard_2.html
74.05 KB
Del
OK
dashboard_3.html
64.1 KB
Del
OK
dashboard_4.html
31.3 KB
Del
OK
dashboard_4_1.html
66.06 KB
Del
OK
dashboard_5.html
65.02 KB
Del
OK
datamaps.html
31.59 KB
Del
OK
diff.html
28.22 KB
Del
OK
draggable_panels.html
29.03 KB
Del
OK
ecommerce-cart.html
40.84 KB
Del
OK
ecommerce-orders.html
76.31 KB
Del
OK
ecommerce_payments.html
35.62 KB
Del
OK
ecommerce_product.html
58.66 KB
Del
OK
ecommerce_product_detail.html
33.62 KB
Del
OK
ecommerce_product_list.html
61.23 KB
Del
OK
ecommerce_products_grid.html
38.04 KB
Del
OK
email_template.html
25.31 KB
Del
OK
empty_page.html
23.88 KB
Del
OK
faq.html
45.05 KB
Del
OK
file_manager.html
43.47 KB
Del
OK
forgot_password.html
1.78 KB
Del
OK
form_advanced.html
127.02 KB
Del
OK
form_autocomplete.html
36.09 KB
Del
OK
form_basic.html
54.32 KB
Del
OK
form_editors.html
26.86 KB
Del
OK
form_file_upload.html
31.82 KB
Del
OK
form_markdown.html
32.74 KB
Del
OK
form_wizard.html
35.45 KB
Del
OK
forum_main.html
41.05 KB
Del
OK
forum_post.html
32.47 KB
Del
OK
full_height.html
62.46 KB
Del
OK
google_maps.html
31.94 KB
Del
OK
graph_chartist.html
29.74 KB
Del
OK
graph_chartjs.html
25.61 KB
Del
OK
graph_flot.html
31.07 KB
Del
OK
graph_morris.html
30.42 KB
Del
OK
graph_peity.html
30.96 KB
Del
OK
graph_rickshaw.html
33.19 KB
Del
OK
graph_sparkline.html
31.14 KB
Del
OK
grid_options.html
47.73 KB
Del
OK
helper_classes.html
49.86 KB
Del
OK
i18support.html
52.24 KB
Del
OK
icons.html
111.19 KB
Del
OK
idle_timer.html
26.55 KB
Del
OK
index.html
114 B
Del
OK
index_html.html
51.86 KB
Del
OK
invoice.html
29.42 KB
Del
OK
invoice_print.html
6.36 KB
Del
OK
issue_tracker.html
49.97 KB
Del
OK
jq_grid.html
32.46 KB
Del
OK
landing.html
31.53 KB
Del
OK
layouts.html
26.76 KB
Del
OK
loading_buttons.html
30.59 KB
Del
OK
lockscreen.html
1.49 KB
Del
OK
login.html
1.97 KB
Del
OK
login_two_columns.html
2.92 KB
Del
OK
mail_compose.html
28.93 KB
Del
OK
mail_detail.html
32.56 KB
Del
OK
mailbox.html
37.88 KB
Del
OK
masonry.html
34.83 KB
Del
OK
md-skin.html
22.16 KB
Del
OK
metrics.html
42.98 KB
Del
OK
modal_window.html
40.52 KB
Del
OK
nestable_list.html
33.32 KB
Del
OK
notifications.html
31.36 KB
Del
OK
off_canvas_menu.html
29.2 KB
Del
OK
package.html
38.27 KB
Del
OK
password_meter.html
33.92 KB
Del
OK
pdf_viewer.html
29.77 KB
Del
OK
pin_board.html
26.53 KB
Del
OK
profile.html
36.74 KB
Del
OK
profile_2.html
45.15 KB
Del
OK
project_detail.html
48.31 KB
Del
OK
projects.html
45.89 KB
Del
OK
register.html
2.41 KB
Del
OK
resizeable_panels.html
28.2 KB
Del
OK
search_results.html
29.35 KB
Del
OK
skin-config.html
12.94 KB
Del
OK
slick_carousel.html
34.77 KB
Del
OK
social_buttons.html
33.58 KB
Del
OK
social_feed.html
54.74 KB
Del
OK
spinners.html
33.27 KB
Del
OK
spinners_usage.html
31.01 KB
Del
OK
sweetalert.html
28.6 KB
Del
OK
table_basic.html
40.58 KB
Del
OK
table_data_tables.html
43.89 KB
Del
OK
table_foo_table.html
50.6 KB
Del
OK
tabs.html
36.37 KB
Del
OK
tabs_panels.html
44.6 KB
Del
OK
teams_board.html
44.63 KB
Del
OK
text_spinners.html
37.95 KB
Del
OK
timeline.html
32.89 KB
Del
OK
timeline_2.html
30.46 KB
Del
OK
tinycon.html
27.24 KB
Del
OK
toastr_notifications.html
39.78 KB
Del
OK
tour.html
28.06 KB
Del
OK
tree_view.html
32.83 KB
Del
OK
truncate.html
30.17 KB
Del
OK
typography.html
48.37 KB
Del
OK
validation.html
30.84 KB
Del
OK
video.html
28.66 KB
Del
OK
vote_list.html
44.49 KB
Del
OK
widgets.html
53.64 KB
Del
OK
Edit: buttons.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>INSPINIA | Dashboard</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="font-awesome/css/font-awesome.css" rel="stylesheet"> <link href="css/animate.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> </head> <body> <div id="wrapper"> <nav class="navbar-default navbar-static-side" role="navigation"> <div class="sidebar-collapse"> <ul class="nav metismenu" id="side-menu"> <li class="nav-header"> <div class="dropdown profile-element"> <span> <img alt="image" class="img-circle" src="img/profile_small.jpg" /> </span> <a data-toggle="dropdown" class="dropdown-toggle" href="#"> <span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">David Williams</strong> </span> <span class="text-muted text-xs block">Art Director <b class="caret"></b></span> </span> </a> <ul class="dropdown-menu animated fadeInRight m-t-xs"> <li><a href="profile.html">Profile</a></li> <li><a href="contacts.html">Contacts</a></li> <li><a href="mailbox.html">Mailbox</a></li> <li class="divider"></li> <li><a href="login.html">Logout</a></li> </ul> </div> <div class="logo-element"> IN+ </div> </li> <li> <a href="index.html"><i class="fa fa-th-large"></i> <span class="nav-label">Dashboards</span> <span class="fa arrow"></span></a> <ul class="nav nav-second-level collapse"> <li><a href="index.html">Dashboard v.1</a></li> <li><a href="dashboard_2.html">Dashboard v.2</a></li> <li><a href="dashboard_3.html">Dashboard v.3</a></li> <li><a href="dashboard_4_1.html">Dashboard v.4</a></li> <li><a href="dashboard_5.html">Dashboard v.5 </a></li> </ul> </li> <li> <a href="layouts.html"><i class="fa fa-diamond"></i> <span class="nav-label">Layouts</span></a> </li> <li> <a href="#"><i class="fa fa-bar-chart-o"></i> <span class="nav-label">Graphs</span><span class="fa arrow"></span></a> <ul class="nav nav-second-level collapse"> <li><a href="graph_flot.html">Flot Charts</a></li> <li><a href="graph_morris.html">Morris.js Charts</a></li> <li><a href="graph_rickshaw.html">Rickshaw Charts</a></li> <li><a href="graph_chartjs.html">Chart.js</a></li> <li><a href="graph_chartist.html">Chartist</a></li> <li><a href="c3.html">c3 charts</a></li> <li><a href="graph_peity.html">Peity Charts</a></li> <li><a href="graph_sparkline.html">Sparkline Charts</a></li> </ul> </li> <li> <a href="mailbox.html"><i class="fa fa-envelope"></i> <span class="nav-label">Mailbox </span><span class="label label-warning pull-right">16/24</span></a> <ul class="nav nav-second-level collapse"> <li><a href="mailbox.html">Inbox</a></li> <li><a href="mail_detail.html">Email view</a></li> <li><a href="mail_compose.html">Compose email</a></li> <li><a href="email_template.html">Email templates</a></li> </ul> </li> <li> <a href="metrics.html"><i class="fa fa-pie-chart"></i> <span class="nav-label">Metrics</span> </a> </li> <li> <a href="widgets.html"><i class="fa fa-flask"></i> <span class="nav-label">Widgets</span></a> </li> <li> <a href="#"><i class="fa fa-edit"></i> <span class="nav-label">Forms</span><span class="fa arrow"></span></a> <ul class="nav nav-second-level collapse"> <li><a href="form_basic.html">Basic form</a></li> <li><a href="form_advanced.html">Advanced Plugins</a></li> <li><a href="form_wizard.html">Wizard</a></li> <li><a href="form_file_upload.html">File Upload</a></li> <li><a href="form_editors.html">Text Editor</a></li> <li><a href="form_autocomplete.html">Autocomplete</a></li> <li><a href="form_markdown.html">Markdown</a></li> </ul> </li> <li> <a href="#"><i class="fa fa-desktop"></i> <span class="nav-label">App Views</span> <span class="pull-right label label-primary">SPECIAL</span></a> <ul class="nav nav-second-level collapse"> <li><a href="contacts.html">Contacts</a></li> <li><a href="profile.html">Profile</a></li> <li><a href="profile_2.html">Profile v.2</a></li> <li><a href="contacts_2.html">Contacts v.2</a></li> <li><a href="projects.html">Projects</a></li> <li><a href="project_detail.html">Project detail</a></li> <li><a href="activity_stream.html">Activity stream</a></li> <li><a href="teams_board.html">Teams board</a></li> <li><a href="social_feed.html">Social feed</a></li> <li><a href="clients.html">Clients</a></li> <li><a href="full_height.html">Outlook view</a></li> <li><a href="vote_list.html">Vote list</a></li> <li><a href="file_manager.html">File manager</a></li> <li><a href="calendar.html">Calendar</a></li> <li><a href="issue_tracker.html">Issue tracker</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="article.html">Article</a></li> <li><a href="faq.html">FAQ</a></li> <li><a href="timeline.html">Timeline</a></li> <li><a href="pin_board.html">Pin board</a></li> </ul> </li> <li> <a href="#"><i class="fa fa-files-o"></i> <span class="nav-label">Other Pages</span><span class="fa arrow"></span></a> <ul class="nav nav-second-level collapse"> <li><a href="search_results.html">Search results</a></li> <li><a href="lockscreen.html">Lockscreen</a></li> <li><a href="invoice.html">Invoice</a></li> <li><a href="login.html">Login</a></li> <li><a href="login_two_columns.html">Login v.2</a></li> <li><a href="forgot_password.html">Forget password</a></li> <li><a href="register.html">Register</a></li> <li><a href="404.html">404 Page</a></li> <li><a href="500.html">500 Page</a></li> <li><a href="empty_page.html">Empty page</a></li> </ul> </li> <li> <a href="#"><i class="fa fa-globe"></i> <span class="nav-label">Miscellaneous</span><span class="label label-info pull-right">NEW</span></a> <ul class="nav nav-second-level collapse"> <li><a href="toastr_notifications.html">Notification</a></li> <li><a href="nestable_list.html">Nestable list</a></li> <li><a href="agile_board.html">Agile board</a></li> <li><a href="timeline_2.html">Timeline v.2</a></li> <li><a href="diff.html">Diff</a></li> <li><a href="pdf_viewer.html">PDF viewer</a></li> <li><a href="i18support.html">i18 support</a></li> <li><a href="sweetalert.html">Sweet alert</a></li> <li><a href="idle_timer.html">Idle timer</a></li> <li><a href="truncate.html">Truncate</a></li> <li><a href="password_meter.html">Password meter</a></li> <li><a href="spinners.html">Spinners</a></li> <li><a href="spinners_usage.html">Spinners usage</a></li> <li><a href="tinycon.html">Live favicon</a></li> <li><a href="google_maps.html">Google maps</a></li> <li><a href="datamaps.html">Datamaps</a></li> <li><a href="social_buttons.html">Social buttons</a></li> <li><a href="code_editor.html">Code editor</a></li> <li><a href="modal_window.html">Modal window</a></li> <li><a href="clipboard.html">Clipboard</a></li> <li><a href="text_spinners.html">Text spinners</a></li> <li><a href="forum_main.html">Forum view</a></li> <li><a href="validation.html">Validation</a></li> <li><a href="tree_view.html">Tree view</a></li> <li><a href="loading_buttons.html">Loading buttons</a></li> <li><a href="chat_view.html">Chat view</a></li> <li><a href="masonry.html">Masonry</a></li> <li><a href="tour.html">Tour</a></li> </ul> </li> <li class="active"> <a href="#"><i class="fa fa-flask"></i> <span class="nav-label">UI Elements</span><span class="fa arrow"></span></a> <ul class="nav nav-second-level"> <li><a href="typography.html">Typography</a></li> <li><a href="icons.html">Icons</a></li> <li><a href="draggable_panels.html">Draggable Panels</a></li> <li><a href="resizeable_panels.html">Resizeable Panels</a></li> <li class="active"><a href="buttons.html">Buttons</a></li> <li><a href="video.html">Video</a></li> <li><a href="tabs_panels.html">Panels</a></li> <li><a href="tabs.html">Tabs</a></li> <li><a href="notifications.html">Notifications & Tooltips</a></li> <li><a href="helper_classes.html">Helper css classes</a></li> <li><a href="badges_labels.html">Badges, Labels, Progress</a></li> </ul> </li> <li> <a href="grid_options.html"><i class="fa fa-laptop"></i> <span class="nav-label">Grid options</span></a> </li> <li> <a href="#"><i class="fa fa-table"></i> <span class="nav-label">Tables</span><span class="fa arrow"></span></a> <ul class="nav nav-second-level collapse"> <li><a href="table_basic.html">Static Tables</a></li> <li><a href="table_data_tables.html">Data Tables</a></li> <li><a href="table_foo_table.html">Foo Tables</a></li> <li><a href="jq_grid.html">jqGrid</a></li> </ul> </li> <li> <a href="#"><i class="fa fa-shopping-cart"></i> <span class="nav-label">E-commerce</span><span class="fa arrow"></span></a> <ul class="nav nav-second-level collapse"> <li><a href="ecommerce_products_grid.html">Products grid</a></li> <li><a href="ecommerce_product_list.html">Products list</a></li> <li><a href="ecommerce_product.html">Product edit</a></li> <li><a href="ecommerce_product_detail.html">Product detail</a></li> <li><a href="ecommerce-cart.html">Cart</a></li> <li><a href="ecommerce-orders.html">Orders</a></li> <li><a href="ecommerce_payments.html">Credit Card form</a></li> </ul> </li> <li> <a href="#"><i class="fa fa-picture-o"></i> <span class="nav-label">Gallery</span><span class="fa arrow"></span></a> <ul class="nav nav-second-level collapse"> <li><a href="basic_gallery.html">Lightbox Gallery</a></li> <li><a href="slick_carousel.html">Slick Carousel</a></li> <li><a href="carousel.html">Bootstrap Carousel</a></li> </ul> </li> <li> <a href="#"><i class="fa fa-sitemap"></i> <span class="nav-label">Menu Levels </span><span class="fa arrow"></span></a> <ul class="nav nav-second-level collapse"> <li> <a href="#">Third Level <span class="fa arrow"></span></a> <ul class="nav nav-third-level"> <li> <a href="#">Third Level Item</a> </li> <li> <a href="#">Third Level Item</a> </li> <li> <a href="#">Third Level Item</a> </li> </ul> </li> <li><a href="#">Second Level Item</a></li> <li> <a href="#">Second Level Item</a></li> <li> <a href="#">Second Level Item</a></li> </ul> </li> <li> <a href="css_animation.html"><i class="fa fa-magic"></i> <span class="nav-label">CSS Animations </span><span class="label label-info pull-right">62</span></a> </li> <li class="landing_link"> <a target="_blank" href="landing.html"><i class="fa fa-star"></i> <span class="nav-label">Landing Page</span> <span class="label label-warning pull-right">NEW</span></a> </li> <li class="special_link"> <a href="package.html"><i class="fa fa-database"></i> <span class="nav-label">Package</span></a> </li> </ul> </div> </nav> <div id="page-wrapper" class="gray-bg"> <div class="row border-bottom"> <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0"> <div class="navbar-header"> <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a> <form role="search" class="navbar-form-custom" action="search_results.html"> <div class="form-group"> <input type="text" placeholder="Search for something..." class="form-control" name="top-search" id="top-search"> </div> </form> </div> <ul class="nav navbar-top-links navbar-right"> <li> <span class="m-r-sm text-muted welcome-message">Welcome to INSPINIA+ Admin Theme.</span> </li> <li class="dropdown"> <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#"> <i class="fa fa-envelope"></i> <span class="label label-warning">16</span> </a> <ul class="dropdown-menu dropdown-messages"> <li> <div class="dropdown-messages-box"> <a href="profile.html" class="pull-left"> <img alt="image" class="img-circle" src="img/a7.jpg"> </a> <div class="media-body"> <small class="pull-right">46h ago</small> <strong>Mike Loreipsum</strong> started following <strong>Monica Smith</strong>. <br> <small class="text-muted">3 days ago at 7:58 pm - 10.06.2014</small> </div> </div> </li> <li class="divider"></li> <li> <div class="dropdown-messages-box"> <a href="profile.html" class="pull-left"> <img alt="image" class="img-circle" src="img/a4.jpg"> </a> <div class="media-body "> <small class="pull-right text-navy">5h ago</small> <strong>Chris Johnatan Overtunk</strong> started following <strong>Monica Smith</strong>. <br> <small class="text-muted">Yesterday 1:21 pm - 11.06.2014</small> </div> </div> </li> <li class="divider"></li> <li> <div class="dropdown-messages-box"> <a href="profile.html" class="pull-left"> <img alt="image" class="img-circle" src="img/profile.jpg"> </a> <div class="media-body "> <small class="pull-right">23h ago</small> <strong>Monica Smith</strong> love <strong>Kim Smith</strong>. <br> <small class="text-muted">2 days ago at 2:30 am - 11.06.2014</small> </div> </div> </li> <li class="divider"></li> <li> <div class="text-center link-block"> <a href="mailbox.html"> <i class="fa fa-envelope"></i> <strong>Read All Messages</strong> </a> </div> </li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#"> <i class="fa fa-bell"></i> <span class="label label-primary">8</span> </a> <ul class="dropdown-menu dropdown-alerts"> <li> <a href="mailbox.html"> <div> <i class="fa fa-envelope fa-fw"></i> You have 16 messages <span class="pull-right text-muted small">4 minutes ago</span> </div> </a> </li> <li class="divider"></li> <li> <a href="profile.html"> <div> <i class="fa fa-twitter fa-fw"></i> 3 New Followers <span class="pull-right text-muted small">12 minutes ago</span> </div> </a> </li> <li class="divider"></li> <li> <a href="grid_options.html"> <div> <i class="fa fa-upload fa-fw"></i> Server Rebooted <span class="pull-right text-muted small">4 minutes ago</span> </div> </a> </li> <li class="divider"></li> <li> <div class="text-center link-block"> <a href="notifications.html"> <strong>See All Alerts</strong> <i class="fa fa-angle-right"></i> </a> </div> </li> </ul> </li> <li> <a href="login.html"> <i class="fa fa-sign-out"></i> Log out </a> </li> </ul> </nav> </div> <div class="row wrapper border-bottom white-bg page-heading"> <div class="col-lg-10"> <h2>Buttons</h2> <ol class="breadcrumb"> <li> <a href="index.html">Home</a> </li> <li> <a>UI Elements</a> </li> <li class="active"> <strong>Buttons</strong> </li> </ol> </div> <div class="col-lg-2"> </div> </div> <div class="row wrapper wrapper-content animated fadeInRight"> <div class="col-lg-4"> <div class="ibox float-e-margins"> <div class="ibox-title"> <h5>Colors buttons</h5> <div class="ibox-tools"> <a class="collapse-link"> <i class="fa fa-chevron-up"></i> </a> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class="fa fa-wrench"></i> </a> <ul class="dropdown-menu dropdown-user"> <li><a href="#">Config option 1</a> </li> <li><a href="#">Config option 2</a> </li> </ul> <a class="close-link"> <i class="fa fa-times"></i> </a> </div> </div> <div class="ibox-content"> <p> Use any of the available button classes to quickly create a styled button. </p> <h3 class="font-bold"> Normal buttons </h3> <p> <button type="button" class="btn btn-w-m btn-default">Default</button> <button type="button" class="btn btn-w-m btn-primary">Primary</button> <button type="button" class="btn btn-w-m btn-success">Success</button> <button type="button" class="btn btn-w-m btn-info">Info</button> <button type="button" class="btn btn-w-m btn-warning">Warning</button> <button type="button" class="btn btn-w-m btn-danger">Danger</button> <button type="button" class="btn btn-w-m btn-link">Link</button> </p> </div> </div> </div> <div class="col-lg-4"> <div class="ibox float-e-margins"> <div class="ibox-title"> <h5>Diferent size</h5> <div class="ibox-tools"> <a class="collapse-link"> <i class="fa fa-chevron-up"></i> </a> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class="fa fa-wrench"></i> </a> <ul class="dropdown-menu dropdown-user"> <li><a href="#">Config option 1</a> </li> <li><a href="#">Config option 2</a> </li> </ul> <a class="close-link"> <i class="fa fa-times"></i> </a> </div> </div> <div class="ibox-content"> <p> If You want larger or smaller buttons You can add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> class. </p> <h3 class="font-bold">Button Sizes</h3> <p> <button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-default btn-lg">Large button</button> <br/> <button type="button" class="btn btn-primary">Default button</button> <button type="button" class="btn btn-default">Default button</button> <br/> <button type="button" class="btn btn-primary btn-sm">Small button</button> <button type="button" class="btn btn-default btn-sm">Small button</button> <br/> <button type="button" class="btn btn-primary btn-xs">Mini button</button> <button type="button" class="btn btn-default btn-xs">Mini button</button> </p> </div> </div> </div> <div class="col-lg-4"> <div class="ibox float-e-margins"> <div class="ibox-title"> <h5>Outline and Block Buttons</h5> <div class="ibox-tools"> <a class="collapse-link"> <i class="fa fa-chevron-up"></i> </a> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class="fa fa-wrench"></i> </a> <ul class="dropdown-menu dropdown-user"> <li><a href="#">Config option 1</a> </li> <li><a href="#">Config option 2</a> </li> </ul> <a class="close-link"> <i class="fa fa-times"></i> </a> </div> </div> <div class="ibox-content"> <p> Create block level buttons or outline buttons, by adding <code>.btn-block</code> or <code>.btn-outline</code>. </p> <h3 class="font-bold">Outline buttons</h3> <p> <button type="button" class="btn btn-outline btn-default">Default</button> <button type="button" class="btn btn-outline btn-primary">Primary</button> <button type="button" class="btn btn-outline btn-success">Success</button> <button type="button" class="btn btn-outline btn-info">Info</button> <button type="button" class="btn btn-outline btn-warning">Warning</button> <button type="button" class="btn btn-outline btn-danger">Danger</button> <button type="button" class="btn btn-outline btn-link">Link</button> </p> <h3 class="font-bold">Block buttons</h3> <p> <button type="button" class="btn btn-block btn-outline btn-primary">Primary</button> </p> </div> </div> </div> <div class="col-lg-12"> <div class="ibox float-e-margins"> <div class="ibox-title"> <h5>3D Buttons</h5> <div class="ibox-tools"> <a class="collapse-link"> <i class="fa fa-chevron-up"></i> </a> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class="fa fa-wrench"></i> </a> <ul class="dropdown-menu dropdown-user"> <li><a href="#">Config option 1</a> </li> <li><a href="#">Config option 2</a> </li> </ul> <a class="close-link"> <i class="fa fa-times"></i> </a> </div> </div> <div class="ibox-content"> <p> To add three diminsion to buttons You can add <code>.dim</code> class to button. </p> <h3 class="font-bold">Three diminsion button</h3> <button class="btn btn-primary dim btn-large-dim" type="button"><i class="fa fa-money"></i></button> <button class="btn btn-warning dim btn-large-dim" type="button"><i class="fa fa-warning"></i></button> <button class="btn btn-danger dim btn-large-dim" type="button"><i class="fa fa-heart"></i></button> <button class="btn btn-primary dim btn-large-dim" type="button"><i class="fa fa-dollar"></i>6</button> <button class="btn btn-info dim btn-large-dim btn-outline" type="button"><i class="fa fa-ruble"></i></button> <button class="btn btn-primary dim" type="button"><i class="fa fa-money"></i></button> <button class="btn btn-warning dim" type="button"><i class="fa fa-warning"></i></button> <button class="btn btn-primary dim" type="button"><i class="fa fa-check"></i></button> <button class="btn btn-success dim" type="button"><i class="fa fa-upload"></i></button> <button class="btn btn-info dim" type="button"><i class="fa fa-paste"></i> </button> <button class="btn btn-warning dim" type="button"><i class="fa fa-warning"></i></button> <button class="btn btn-default dim " type="button"><i class="fa fa-star"></i></button> <button class="btn btn-danger dim " type="button"><i class="fa fa-heart"></i></button> <button class="btn btn-outline btn-primary dim" type="button"><i class="fa fa-money"></i></button> <button class="btn btn-outline btn-warning dim" type="button"><i class="fa fa-warning"></i></button> <button class="btn btn-outline btn-primary dim" type="button"><i class="fa fa-check"></i></button> <button class="btn btn-outline btn-success dim" type="button"><i class="fa fa-upload"></i></button> <button class="btn btn-outline btn-info dim" type="button"><i class="fa fa-paste"></i> </button> <button class="btn btn-outline btn-warning dim" type="button"><i class="fa fa-warning"></i></button> <button class="btn btn-outline btn-danger dim " type="button"><i class="fa fa-heart"></i></button> </div> </div> </div> <div class="col-lg-12"> <div class="row"> <div class="col-lg-6"> <div class="ibox float-e-margins"> <div class="ibox-title"> <h5>Button dropdowns</h5> <div class="ibox-tools"> <a class="collapse-link"> <i class="fa fa-chevron-up"></i> </a> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class="fa fa-wrench"></i> </a> <ul class="dropdown-menu dropdown-user"> <li><a href="#">Config option 1</a> </li> <li><a href="#">Config option 2</a> </li> </ul> <a class="close-link"> <i class="fa fa-times"></i> </a> </div> </div> <div class="ibox-content"> <p> Droppdowns buttons are avalible with any color and any size. </p> <h3 class="font-bold">Dropdowns</h3> <div class="btn-group"> <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Action <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#" class="font-bold">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button data-toggle="dropdown" class="btn btn-warning dropdown-toggle">Action <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button data-toggle="dropdown" class="btn btn-default dropdown-toggle">Action <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <br/> <div class="btn-group"> <button data-toggle="dropdown" class="btn btn-primary btn-sm dropdown-toggle">Action <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button data-toggle="dropdown" class="btn btn-warning btn-sm dropdown-toggle">Action <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button data-toggle="dropdown" class="btn btn-default btn-sm dropdown-toggle">Action <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <br/> <div class="btn-group"> <button data-toggle="dropdown" class="btn btn-primary btn-xs dropdown-toggle">Action <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button data-toggle="dropdown" class="btn btn-warning btn-xs dropdown-toggle">Action <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle">Action <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </div> </div> <div class="col-lg-6"> <div class="ibox float-e-margins"> <div class="ibox-title"> <h5>Grouped Buttons</h5> <div class="ibox-tools"> <a class="collapse-link"> <i class="fa fa-chevron-up"></i> </a> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class="fa fa-wrench"></i> </a> <ul class="dropdown-menu dropdown-user"> <li><a href="#">Config option 1</a> </li> <li><a href="#">Config option 2</a> </li> </ul> <a class="close-link"> <i class="fa fa-times"></i> </a> </div> </div> <div class="ibox-content"> <p> This is a group of buttons, ideal for sytuation where many actions are related to same element. </p> <h3 class="font-bold">Button Group</h3> <div class="btn-group"> <button class="btn btn-white" type="button">Left</button> <button class="btn btn-primary" type="button">Middle</button> <button class="btn btn-white" type="button">Right</button> </div> <br/> <br/> <div class="btn-group"> <button type="button" class="btn btn-white"><i class="fa fa-chevron-left"></i></button> <button class="btn btn-white">1</button> <button class="btn btn-white active">2</button> <button class="btn btn-white">3</button> <button class="btn btn-white">4</button> <button type="button" class="btn btn-white"><i class="fa fa-chevron-right"></i> </button> </div> </div> </div> </div> </div> <div class="ibox float-e-margins"> <div class="ibox-title"> <h5>Icon Buttons</h5> <div class="ibox-tools"> <a class="collapse-link"> <i class="fa fa-chevron-up"></i> </a> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class="fa fa-wrench"></i> </a> <ul class="dropdown-menu dropdown-user"> <li><a href="#">Config option 1</a> </li> <li><a href="#">Config option 2</a> </li> </ul> <a class="close-link"> <i class="fa fa-times"></i> </a> </div> </div> <div class="ibox-content"> <p> To buttons with any color or any size you can add extra icon on the left or the right side. </p> <h3 class="font-bold">Commom Icon Buttons</h3> <p> <button class="btn btn-primary " type="button"><i class="fa fa-check"></i> Submit</button> <button class="btn btn-success " type="button"><i class="fa fa-upload"></i> <span class="bold">Upload</span></button> <button class="btn btn-info " type="button"><i class="fa fa-paste"></i> Edit</button> <button class="btn btn-warning " type="button"><i class="fa fa-warning"></i> <span class="bold">Warning</span></button> <button class="btn btn-default " type="button"><i class="fa fa-map-marker"></i> Map</button> <a class="btn btn-success btn-facebook"> <i class="fa fa-facebook"> </i> Sign in with Facebook </a> <a class="btn btn-success btn-facebook btn-outline"> <i class="fa fa-facebook"> </i> Sign in with Facebook </a> <a class="btn btn-white btn-bitbucket"> <i class="fa fa-user-md"></i> </a> <a class="btn btn-white btn-bitbucket"> <i class="fa fa-group"></i> </a> <a class="btn btn-white btn-bitbucket"> <i class="fa fa-wrench"></i> </a> <a class="btn btn-white btn-bitbucket"> <i class="fa fa-exchange"></i> </a> <a class="btn btn-white btn-bitbucket"> <i class="fa fa-check-circle-o"></i> </a> <a class="btn btn-white btn-bitbucket"> <i class="fa fa-road"></i> </a> <a class="btn btn-white btn-bitbucket"> <i class="fa fa-ambulance"></i> </a> <a class="btn btn-white btn-bitbucket"> <i class="fa fa-star"></i> Stared </a> </p> <h3 class="font-bold">Toggle buttons Variations</h3> <p>Button groups can act as a radio or a switch or even a single toggle. Below are some examples click to see what happens</p> <button data-toggle="button" class="btn btn-primary btn-outline" type="button">Single Toggle</button> <button data-toggle="button" class="btn btn-primary" type="button">Single Toggle</button> <div data-toggle="buttons-checkbox" class="btn-group"> <button class="btn btn-primary active" type="button"><i class="fa fa-bold"></i> Bold</button> <button class="btn btn-primary" type="button"><i class="fa fa-underline"></i> Underline</button> <button class="btn btn-primary active" type="button"><i class="fa fa-italic"></i> Italic</button> </div> </div> </div> </div> <div class="col-lg-12"> <div class="row"> <div class="col-lg-6"> <div class="ibox float-e-margins"> <div class="ibox-title"> <h5>Circle Icon Buttons</h5> <div class="ibox-tools"> <a class="collapse-link"> <i class="fa fa-chevron-up"></i> </a> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class="fa fa-wrench"></i> </a> <ul class="dropdown-menu dropdown-user"> <li><a href="#">Config option 1</a> </li> <li><a href="#">Config option 2</a> </li> </ul> <a class="close-link"> <i class="fa fa-times"></i> </a> </div> </div> <div class="ibox-content"> <p> For buttons you can add <code>.btn-circle</code> to rounded buttons and make it circle. </p> <h3 class="font-bold">Circle buttons</h3> <br/> <button class="btn btn-default btn-circle" type="button"><i class="fa fa-check"></i> </button> <button class="btn btn-primary btn-circle" type="button"><i class="fa fa-list"></i> </button> <button class="btn btn-success btn-circle" type="button"><i class="fa fa-link"></i> </button> <button class="btn btn-info btn-circle" type="button"><i class="fa fa-check"></i> </button> <button class="btn btn-warning btn-circle" type="button"><i class="fa fa-times"></i> </button> <button class="btn btn-danger btn-circle" type="button"><i class="fa fa-heart"></i> </button> <button class="btn btn-danger btn-circle btn-outline" type="button"><i class="fa fa-heart"></i> </button> <br/> <br/> <button class="btn btn-default btn-circle btn-lg" type="button"><i class="fa fa-check"></i> </button> <button class="btn btn-primary btn-circle btn-lg" type="button"><i class="fa fa-list"></i> </button> <button class="btn btn-success btn-circle btn-lg" type="button"><i class="fa fa-link"></i> </button> <button class="btn btn-info btn-circle btn-lg" type="button"><i class="fa fa-check"></i> </button> <button class="btn btn-warning btn-circle btn-lg" type="button"><i class="fa fa-times"></i> </button> <button class="btn btn-danger btn-circle btn-lg" type="button"><i class="fa fa-heart"></i> </button> <button class="btn btn-danger btn-circle btn-lg btn-outline" type="button"><i class="fa fa-heart"></i> </button> </div> </div> </div> <div class="col-lg-6"> <div class="ibox float-e-margins"> <div class="ibox-title"> <h5>Rounded Buttons</h5> <div class="ibox-tools"> <a class="collapse-link"> <i class="fa fa-chevron-up"></i> </a> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class="fa fa-wrench"></i> </a> <ul class="dropdown-menu dropdown-user"> <li><a href="#">Config option 1</a> </li> <li><a href="#">Config option 2</a> </li> </ul> <a class="close-link"> <i class="fa fa-times"></i> </a> </div> </div> <div class="ibox-content"> <p> You can also add <code>.btn-rounded</code> class to round buttons. </p> <h3 class="font-bold">Button Group</h3> <p> <a class="btn btn-default btn-rounded" href="#">Default</a> <a class="btn btn-primary btn-rounded" href="#">Primary</a> <a class="btn btn-success btn-rounded" href="#">Success</a> <a class="btn btn-info btn-rounded" href="#">Info</a> <a class="btn btn-warning btn-rounded" href="#">Warning</a> <a class="btn btn-danger btn-rounded" href="#">Danger</a> <a class="btn btn-danger btn-rounded btn-outline" href="#">Danger</a> <br/> <br/> <a class="btn btn-primary btn-rounded btn-block" href="#"><i class="fa fa-info-circle"></i> Block rounded with icon button</a> </p> </div> </div> </div> </div> </div> </div> <div class="footer"> <div class="pull-right"> 10GB of <strong>250GB</strong> Free. </div> <div> <strong>Copyright</strong> Example Company © 2014-2017 </div> </div> </div> </div> <!-- Mainly scripts --> <script src="js/jquery-3.1.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script> <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script> <!-- Custom and plugin javascript --> <script src="js/inspinia.js"></script> <script src="js/plugins/pace/pace.min.js"></script> </body> </html>
Save