Стилизация кнопочек

client/components/Reader/Reader.vue

@@ -2,22 +2,42 @@
     <el-container>
         <el-header height='50px'>
         <div class="header">
-            <el-button plain class="tool-button" @click="doBack"><i class="el-icon-back"></i></el-button>
+            <el-tooltip content="Загрузить книгу" open-delay="1000" effect="light">
+                <el-button class="tool-button" :class="buttonActiveClass('back')" @click="doBack"><i class="el-icon-back"></i></el-button>
+            </el-tooltip>
 
             <div>
-                <el-button plain class="tool-button" @click="" ><i class="el-icon-arrow-left"></i></el-button>
+                <el-tooltip content="Действие назад" open-delay="1000" effect="light">
-                <el-button plain class="tool-button" @click="" ><i class="el-icon-arrow-right"></i></el-button>
+                    <el-button class="tool-button" @click="" ><i class="el-icon-arrow-left"></i></el-button>
+                </el-tooltip>
+                <el-tooltip content="Действие вперед" open-delay="1000" effect="light">
+                    <el-button class="tool-button" @click="" ><i class="el-icon-arrow-right"></i></el-button>
+                </el-tooltip>
                 <div class="space"></div>
-                <el-button plain class="tool-button" @click=""><i class="el-icon-rank"></i></el-button>
+                <el-tooltip content="На весь экран" open-delay="1000" effect="light">
-                <el-button plain class="tool-button" @click=""><i class="el-icon-d-arrow-right"></i></el-button>
+                    <el-button class="tool-button" @click=""><i class="el-icon-rank"></i></el-button>
-                <el-button plain class="tool-button" @click=""><i class="el-icon-sort"></i></el-button>
+                </el-tooltip>
-                <el-button plain class="tool-button" @click=""><i class="el-icon-search"></i></el-button>
+                <el-tooltip content="Прокрутка книги" open-delay="1000" effect="light">
-                <el-button plain class="tool-button" @click=""><i class="el-icon-refresh"></i></el-button>                
+                    <el-button class="tool-button" @click=""><i class="el-icon-d-arrow-right"></i></el-button>
+                </el-tooltip>
+                <el-tooltip content="Плавный скроллинг" open-delay="1000" effect="light">
+                    <el-button class="tool-button" @click=""><i class="el-icon-sort"></i></el-button>
+                </el-tooltip>
+                <el-tooltip content="Найти в тексте" open-delay="1000" effect="light">
+                    <el-button class="tool-button" @click=""><i class="el-icon-search"></i></el-button>
+                </el-tooltip>
+                <el-tooltip content="Принудительно обновить книгу в обход кеша" open-delay="1000" effect="light">
+                    <el-button class="tool-button" @click=""><i class="el-icon-refresh"></i></el-button>                
+                </el-tooltip>
                 <div class="space"></div>
-                <el-button plain class="tool-button" @click=""><i class="el-icon-document"></i></el-button>
+                <el-tooltip content="История" open-delay="1000" effect="light">
+                    <el-button class="tool-button" @click=""><i class="el-icon-document"></i></el-button>
+                </el-tooltip>
             </div>
 
-            <el-button plain class="tool-button" @click=""><i class="el-icon-setting"></i></el-button>            
+            <el-tooltip content="Настроить" open-delay="1000" effect="light">
+                <el-button class="tool-button" @click=""><i class="el-icon-setting"></i></el-button>            
+            </el-tooltip>
         </div>
         </el-header>
 
@@ -34,10 +54,20 @@ import Component from 'vue-class-component';
 export default @Component({
 })
 class Reader extends Vue {
+    activeBack = false;
     created() {
     }
 
     doBack() {
+        this.activeBack = !this.activeBack;
+    }
+
+    buttonActiveClass(button) {
+        const activeClass = { 'tool-button-active': true, 'tool-button-active:hover': true };
+        switch (button) {
+            case 'back': return (this.activeBack ? activeClass : {}); break;
+        }
+        return {};
     }
 }
 //-----------------------------------------------------------------------------
@@ -78,16 +108,32 @@ class Reader extends Vue {
     margin-left: 2px;
     margin-right: 2px;
     padding: 0;
+    color: #3E843E;
     background-color: #E6EDF4;
     margin-top: 5px;
     height: 38px;
     width: 38px;
     border: 0;
+    box-shadow: 3px 3px 5px black;
+}
+
+.tool-button:hover {
+    background-color: white;
+}
+
+.tool-button-active {
+    box-shadow: 0 0 0;
+    color: white;
+    background-color: #8AB45F;
+}
+
+.tool-button-active:hover {
+    color: white;
+    background-color: #81C581;
 }
 
 i {
     font-size: 200%;
-    color: #806142;
 }
 
 .space {

client/element.js

@@ -32,6 +32,9 @@ import './theme/tabs.css';
 import ElTabPane from 'element-ui/lib/tab-pane';
 import './theme/tab-pane.css';
 
+import ElTooltip from 'element-ui/lib/tooltip';
+import './theme/tooltip.css';
+
 import ElContainer from 'element-ui/lib/container';
 import './theme/container.css';
 
@@ -48,7 +51,7 @@ const ElNotification = () => import('element-ui/lib/notification');
 import './theme/notification.css';
 
 const components = {
-    ElMenu, ElMenuItem, ElButton, ElCheckbox, ElTabs, ElTabPane,
+    ElMenu, ElMenuItem, ElButton, ElCheckbox, ElTabs, ElTabPane, ElTooltip,
     ElContainer, ElAside, ElMain, ElHeader,
     ElNotification
 };