47 lines
810 B
Vue
47 lines
810 B
Vue
<template>
|
|
<v-card class="mb-2 one-fo-tab">
|
|
<v-layout justify-center >
|
|
<div class="btn-group">
|
|
<button class="button active">Button</button>
|
|
<button class="button">Button</button>
|
|
<button class="button">Button</button>
|
|
<button class="button">Button</button>
|
|
</div>
|
|
</v-layout>
|
|
</v-card>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
.btn-group .button {
|
|
|
|
border: none;
|
|
color: black;
|
|
padding: 29px 51px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
float: left;
|
|
}
|
|
|
|
.btn-group .button:hover {
|
|
background-color: #E0F7FA;
|
|
border-bottom: 5px solid red;
|
|
|
|
}
|
|
|
|
.btn-group .button.active {
|
|
border-bottom: 5px solid red;
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
<script>
|
|
module.exports = {
|
|
|
|
}
|
|
</script>
|