123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 |
- $breakpoint-mobile: 720px;
- $breakpoint-tablet: 1640px;
- .btn-three {
- margin: 5px;
- font-size: 16px;
- color: #FFF;
- transition: all 0.5s;
- position: relative;
- @media (max-width: $breakpoint-tablet) {
- margin: 2px;
- font-size: 11px;
- }
- span {
- color: rgba(255, 255, 255, 0.55);
- }
- }
- .btn-three::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 0;
- background-color: rgba(255,255,255,0.1);
- transition: all 0.3s;
- }
- .btn-three:hover::before {
- opacity: 0 ;
- transform: scale(0.5,0.5);
- }
- .btn-three::after {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 0;
- opacity: 0;
- transition: all 0.3s;
- border: 1px solid rgba(255,255,255,0.5);
- transform: scale(1.2,1.2);
- }
- .btn-three:hover::after {
- opacity: 1;
- transform: scale(1,1);
- }
|