Advertisement
Guest User

oskars pasterino

a guest
Mar 31st, 2020
105
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.28 KB | None | 0 0
  1. body { background-color: #ededed; }
  2.  
  3. .circular-menu {
  4. position: fixed;
  5. bottom: 1em;
  6. right: 1em;
  7. }
  8.  
  9. .circular-menu .floating-btn {
  10. display: block;
  11. height: 3.5em;
  12. width: 3.5em;
  13. border-radius: 50%;
  14. background-color: hsl(4, 98%, 60%);
  15. box-shadow: 0 2px 5px 0 hsla(0, 0%, 0%, 0.26);
  16. color: hsl(0, 0%, 100%);
  17. text-align: center;
  18. line-height: 3.9;
  19. cursor: pointer;
  20. outline: 0;
  21. }
  22.  
  23. .circular-menu.active .floating-btn {
  24. box-shadow: inset 0 0 3px hsla(0, 0%, 0%, 0.3);
  25. }
  26.  
  27. .circular-menu .floating-btn:active {
  28. box-shadow: 0 4px 8px 0 hsla(0, 0%, 0%, 0.4);
  29. }
  30.  
  31. .circular-menu .floating-btn i {
  32. font-size: 1.3em;
  33. transition: transform .2s;
  34. }
  35.  
  36. .circular-menu.active .floating-btn i {
  37. transform: rotate(-45deg);
  38. }
  39.  
  40. .circular-menu:after {
  41. display: block;
  42. content: ' ';
  43. width: 3.5em;
  44. height: 3.5em;
  45. border-radius: 50%;
  46. position: absolute;
  47. top: 0;
  48. right: 0;
  49. z-index: -2;
  50. background-color: hsla(4, 98%, 60%);
  51. transition: all .3s ease;
  52. }
  53.  
  54. .circular-menu.active:after {
  55. transform: scale3d(5.5, 5.5, 1);
  56. transition-timing-function: cubic-bezier(.68, 1.55, .265, 1);
  57. }
  58.  
  59. .circular-menu .items-wrapper {
  60. padding: 0;
  61. margin: 0;
  62. }
  63.  
  64. .circular-menu .menu-item {
  65. position: absolute;
  66. top: .2em;
  67. right: .2em;
  68. z-index: -1;
  69. display: block;
  70. text-decoration: none;
  71. color: hsl(0, 0%, 100%);
  72. font-size: 1em;
  73. width: 3em;
  74. height: 3em;
  75. border-radius: 50%;
  76. text-align: center;
  77. line-height: 3;
  78. background-color: hsla(0, 0%, 0%, .1);
  79. transition: transform .3s ease, background .2s ease;
  80. }
  81.  
  82. .circular-menu .menu-item:hover {
  83. background-color: hsla(0, 0%, 0%, .3);
  84. }
  85.  
  86. .circular-menu .menu-item {
  87. transition-timing-function: cubic-bezier(.175, .885, .32, 1.275);
  88. }
  89.  
  90. .circular-menu.active .menu-item:nth-child(1) { transform: translate3d(1em, -7em, 0); }
  91. .circular-menu.active .menu-item:nth-child(2) { transform: translate3d(-3.5em, -6.3em, 0); }
  92. .circular-menu.active .menu-item:nth-child(3) { transform: translate3d(-6.5em, -3.2em, 0); }
  93. .circular-menu.active .menu-item:nth-child(4) { transform: translate3d(-7em, 1em, 0); }
  94.  
  95. .circular-menu.circular-menu-left {
  96. right: auto;
  97. left: 1em;
  98. }
  99.  
  100. .circular-menu.circular-menu-left .floating-btn {
  101. background-color: hsl(217, 89%, 61%);
  102. }
  103.  
  104. .circular-menu.circular-menu-left:after {
  105. background-color: hsl(217, 89%, 61%);
  106. }
  107.  
  108. .circular-menu.circular-menu-left.active .menu-item:nth-child(1) {transform: translate3d(-1em, -7em, 0);}
  109. .circular-menu.circular-menu-left.active .menu-item:nth-child(2) {transform: translate3d(3.5em, -6.3em, 0);}
  110. .circular-menu.circular-menu-left.active .menu-item:nth-child(3) {transform: translate3d(6.5em, -3.2em, 0);}
  111. .circular-menu.circular-menu-left.active .menu-item:nth-child(4) {transform: translate3d(7em, 1em, 0);}
  112.  
  113. .circular-menu.circular-menu-left .floating-btn {
  114. background-color: hsl(217, 89%, 61%);
  115. }
  116.  
  117. .header{
  118. z-index: 1;
  119. position: fixed;
  120. top: 0;
  121. left: 0;
  122. padding: 1.5rem 0;
  123. width: 100%;
  124. background: #4d4c7d;
  125. box-shadow: 0 0 5px 0 rgba(0,0,0,.05);
  126.  
  127.  
  128. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement