app/src/ui/components/Button.vue

42 lines
592 B
Vue

<template>
<button :class="{danger: danger}">{{label}}</button>
</template>
<script>
export default {
props: {
label: String,
danger: Boolean,
},
};
</script>
<style scoped>
button {
cursor: pointer;
transition: all 0.2s;
padding: 10px 18px;
background: #333;
color: #fff;
font-weight: 500;
border: 2px solid #222;
background: #333;
box-shadow: none;
}
button.danger {
color: #cc0000;
background-color: #200;
border: 2px solid #200;
}
button:hover {
transition: all 0.2s;
background: #444;
}
button.danger:hover {
background: #400;
}
</style>