Icon buttons with text

samples/buttons.php

@@ -9,9 +9,28 @@
 
 /** 
  * @page samples
- * @section cut_strings Cut strings
+ * @section button Buttons
  */
 
+/**
+ * There are default css classes for buttons.
+ *
+ * .bx-btn - standard button
+ * .bx-btn .bx-btn-small - small buttom 
+ * 
+ * To make button with icon only include icon in 'i' tag:
+ * @code
+ *   <i class="sys-icon fire-extinguisher"></i>
+ *   <i style="background-image:url(clock.png)"></i>
+ * @endcode
+ *
+ * To make button with icon and text wrap it in 'u' tag:
+ * @code
+ *   <u class="sys-icon fire-extinguisher">Button text</u>
+ *   <u style="background-image:url(clock.png)">Button text</u>
+ * @endcode
+ */ 
+
 $aPathInfo = pathinfo(__FILE__);
 require_once ($aPathInfo['dirname'] . '/../inc/header.inc.php');
 require_once(BX_DIRECTORY_PATH_INC . "params.inc.php");
@@ -32,25 +51,31 @@ $oTemplate->getPageCode();
  */
 function PageCompMainCode() {
 
+    ob_start();
+?>
+    <button class="bx-btn bx-def-margin-right">Button text</button>
+    <button class="bx-btn bx-btn-img bx-def-margin-right"><i style="background-image:url(template/images/icons/clock.png)"></i></button>
+    <button class="bx-btn bx-btn-img bx-def-margin-right"><u style="background-image:url(template/images/icons/clock.png)">Button text</u></button>
 
-    echo '<button class="bx-btn">Button 1</button>';
-    echo '<div class="bx-clear"></div><hr class="bx-def-hr" />';
+    <div class="bx-clear"></div><hr class="bx-def-hr bx-def-margin-topbottom" />
 
-    echo '<button class="bx-btn bx-btn-img"><i style="background-image:url(template/images/icons/clock.png)"></i></button>';
-    echo '<div class="bx-clear"></div><hr class="bx-def-hr" />';
+    <button class="bx-btn bx-btn-small bx-def-margin-right">Button text</button>
+    <button class="bx-btn bx-btn-small bx-btn-img bx-def-margin-right"><i style="background-image:url(template/images/icons/clock.png)"></i></button>
+    <button class="bx-btn bx-btn-small bx-btn-img bx-def-margin-right"><u style="background-image:url(template/images/icons/clock.png)">Button text</u></button>
 
-    echo '<button class="bx-btn bx-btn-img"><u style="background-image:url(template/images/icons/clock.png)">Button 1</u></button>';
-    echo '<div class="bx-clear"></div><hr class="bx-def-hr" />';
+    <div class="bx-clear"></div><hr class="bx-def-hr bx-def-margin-topbottom" />
 
+    <button class="bx-btn bx-def-margin-right"><i class="sys-icon fire-extinguisher"></i></button>
+    <button class="bx-btn bx-def-margin-right"><i class="sys-icon fire-extinguisher sys-icon-bigger"></i></button>
+    <button class="bx-btn bx-def-margin-right"><i class="sys-icon fire-extinguisher sys-icon-bigger col-red1"></i></button>
+    <button class="bx-btn bx-def-margin-right"><u class="sys-icon fire-extinguisher">Button text</u></button>
 
-    echo '<button class="bx-btn bx-btn-small">Button 1</button>';
-    echo '<div class="bx-clear"></div><hr class="bx-def-hr" />';
+    <div class="bx-clear"></div><hr class="bx-def-hr bx-def-margin-topbottom" />
 
-    echo '<button class="bx-btn bx-btn-small bx-btn-img"><i style="background-image:url(template/images/icons/clock.png)"></i></button>';
-    echo '<div class="bx-clear"></div><hr class="bx-def-hr" />';
+    <button class="bx-btn bx-btn-small bx-def-margin-right"><i class="sys-icon fire-extinguisher"></i></button>
+    <button class="bx-btn bx-btn-small bx-def-margin-right"><u class="sys-icon fire-extinguisher">Button text</u></button>
 
-    echo '<button class="bx-btn bx-btn-small bx-btn-img"><u style="background-image:url(template/images/icons/clock.png)">Button 1</u></button>';
-    echo '<div class="bx-clear"></div><hr class="bx-def-hr" />';
+<?php
 
     return DesignBoxContent("Buttons", ob_get_clean(), BX_DB_PADDING_DEF);
 }

template/css/common.css

@@ -82,6 +82,10 @@ blockquote {
     text-decoration:underline;
 }
 
+.bx-db-menu-tab-btn a {
+    text-decoration:none;
+}
+
 /* --------------- popup boxes */
 
 .bx-popup-width {
@@ -272,6 +276,14 @@ blockquote {
     background-position:0px center;
 }
 
+.bx-btn u.sys-icon {
+    padding-left:0px;
+}
+
+.bx-btn u.sys-icon:before {
+    margin-right:8px;
+}
+
 button.bx-btn,
 input.bx-btn {    
 	padding-top:0px;