fe-drone-ci/src/styles/btn.scss

95 lines
1.3 KiB
SCSS
Raw Normal View History

2017-11-06 10:18:14 +00:00
@import './variables.scss';
2017-04-18 07:09:13 +00:00
@mixin colorBtn($color) {
background: $color;
&:hover {
color: $color;
2017-08-23 03:39:16 +00:00
&:before,
&:after {
2017-04-18 07:09:13 +00:00
background: $color;
}
}
}
.blue-btn {
@include colorBtn($blue)
}
2017-08-23 03:39:16 +00:00
.light-blue-btn {
2017-04-18 07:09:13 +00:00
@include colorBtn($light-blue)
}
.red-btn {
@include colorBtn($red)
}
.pink-btn {
@include colorBtn($pink)
}
.green-btn {
@include colorBtn($green)
}
.tiffany-btn {
@include colorBtn($tiffany)
}
.yellow-btn {
@include colorBtn($yellow)
}
.pan-btn {
font-size: 14px;
color: #fff;
padding: 14px 36px;
border-radius: 8px;
border: none;
outline: none;
transition: 600ms ease all;
position: relative;
display: inline-block;
&:hover {
background: #fff;
2017-08-23 03:39:16 +00:00
&:before,
&:after {
2017-04-18 07:09:13 +00:00
width: 100%;
transition: 600ms ease all;
}
}
2017-08-23 03:39:16 +00:00
&:before,
&:after {
2017-04-18 07:09:13 +00:00
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
&::after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
}
2017-08-23 03:39:16 +00:00
.custom-button {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
color: #fff;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: 0;
margin: 0;
padding: 10px 15px;
font-size: 14px;
border-radius: 4px;
2017-04-18 07:09:13 +00:00
}
2017-08-23 03:39:16 +00:00