user-button.scss 950 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. $breakpoint-mobile: 720px;
  2. $breakpoint-tablet: 1640px;
  3. .btn-three {
  4. margin: 5px;
  5. font-size: 16px;
  6. color: #FFF;
  7. transition: all 0.5s;
  8. position: relative;
  9. @media (max-width: $breakpoint-tablet) {
  10. margin: 2px;
  11. font-size: 11px;
  12. }
  13. span {
  14. color: rgba(255, 255, 255, 0.55);
  15. }
  16. }
  17. .btn-three::before {
  18. content: '';
  19. position: absolute;
  20. top: 0;
  21. left: 0;
  22. width: 100%;
  23. height: 100%;
  24. z-index: 0;
  25. background-color: rgba(255,255,255,0.1);
  26. transition: all 0.3s;
  27. }
  28. .btn-three:hover::before {
  29. opacity: 0 ;
  30. transform: scale(0.5,0.5);
  31. }
  32. .btn-three::after {
  33. content: '';
  34. position: absolute;
  35. top: 0;
  36. left: 0;
  37. width: 100%;
  38. height: 100%;
  39. z-index: 0;
  40. opacity: 0;
  41. transition: all 0.3s;
  42. border: 1px solid rgba(255,255,255,0.5);
  43. transform: scale(1.2,1.2);
  44. }
  45. .btn-three:hover::after {
  46. opacity: 1;
  47. transform: scale(1,1);
  48. }