<template>
<div id="app">
<button class="btn btn-primary">按钮1 <span class="mask mask-1"></span></button>
<button class="btn btn-secondary">按钮2 <span class="mask mask-2"></span></button>
<button class="btn btn-warning">按钮3 <span class="mask mask-3"></span></button>
<button class="btn btn-success">按钮4 <span class="mask mask-4"></span></button>
</div>
</template>
<style lang="less" scoped>
#app {
button {
outline: none;
border: none;
cursor: pointer;
}
.btn {
position: relative;
height: 40px;
padding: 0 15px;
color: #fff;
font-size: 16px;
border: 1px solid;
border-radius: 3px;
margin: 0 10px;
}
.btn-primary {
background-color: #337ab7;
border-color: #2e6da4;
}
.btn-secondary {
background-color: #5bc0de;
border-color: #46b8da;
}
.btn-warning {
background-color: #f0ad4e;
border-color: #eea236;
}
.btn-success {
background-color: #5cb85c;
border-color: #4cae4c;
}
.mask {
position: absolute;
height: 100%;
background-color: #fff;
opacity: 1;
}
.mask-1 {
top: 0;
right: 0;
}
.mask-2 {
top: 0;
left: 0;
border-top-right-radius: 40px;
}
.mask-3 {
left: 50%;
top: 50%;
width: 0;
height: 0;
border-radius: 50%;
}
.mask-4 {
width: 100%;
height: 0;
left: 0;
bottom: 0;
}
.btn-primary:hover .mask-1 {
animation-name: btn-animation-one;
animation-duration: 1s;
}
.btn-secondary:hover .mask-2 {
animation-name: btn-animation-one;
animation-duration: 1s;
}
.btn-warning:hover .mask-3 {
animation-name: btn-animation-three;
animation-duration: 1s;
}
.btn-success:hover .mask-4 {
animation-name: btn-animation-four;
animation-duration: 1s;
}
@keyframes btn-animation-one {
from {
width: 0;
opacity: 1;
}
to {
width: 100%;
opacity: 0;
}
}
@keyframes btn-animation-three {
from {
width: 1px;
height: 1px;
transform: scale(0);
opacity: 1;
}
to {
width: 1px;
height: 1px;
transform: scale(100);
opacity: 0;
}
}
@keyframes btn-animation-four {
from {
height: 0;
opacity: 1;
}
to {
height: 100%;
opacity: 0;
}
}
}
</style>
