Advertisement
artemsemkin

Rubenz Theme: Burger Button

Jul 27th, 2021
1,567
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.68 KB | None | 0 0
  1. .header__burger {
  2.   position: relative;
  3.   display: flex;
  4.   flex-direction: column;
  5.   align-items: flex-end;
  6.   justify-content: center;
  7.   width: 40px;
  8.   height: 40px;
  9.   cursor: pointer;
  10.   pointer-events: initial;
  11.   z-index: 600;
  12. }
  13.  
  14. .header__burger:not(.header__burger_opened):hover .header__burger-line:nth-child(1) {
  15.   transform: scaleX(0.75);
  16. }
  17.  
  18. .header__burger:not(.header__burger_opened):hover .header__burger-line:nth-child(2) {
  19.   transform: scaleX(1.25);
  20. }
  21.  
  22. .header__burger_opened .header__burger-line {
  23.   background-color: #ffffff;
  24. }
  25.  
  26. .header__burger_opened .header__burger-line:nth-child(1) {
  27.   transform: scaleX(0.75);
  28. }
  29.  
  30. .header__burger_opened .header__burger-line:nth-child(2) {
  31.   transform: scaleX(1.25);
  32. }
  33.  
  34. .header__burger_opened:hover .header__burger-line:nth-child(1) {
  35.   transform: scaleX(1);
  36. }
  37.  
  38. .header__burger_opened:hover .header__burger-line:nth-child(2) {
  39.   transform: scaleX(1);
  40. }
  41.  
  42. .header__burger-line {
  43.   display: block;
  44.   width: 100%;
  45.   background-color: #333333;
  46.   height: 2px;
  47.   margin: 4px 0;
  48.   transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  49.   transform-origin: right center;
  50.   transform: translateZ(0);
  51. }
  52.  
  53. .header__burger-line:nth-child(1) {
  54.   max-width: 40px;
  55. }
  56.  
  57. .header__burger-line:nth-child(2) {
  58.   max-width: 30px;
  59. }
  60.  
  61. .header_white .header__burger-line {
  62.   background-color: #ffffff;
  63. }
  64.  
  65. .backgroundblendmode .blend-difference .header__burger-line {
  66.   background-color: #ffffff;
  67. }
  68.  
  69. @media screen and (max-width: 991px) {
  70.   .header__burger-line {
  71.     margin: 3px 0;
  72.   }
  73.   .header__burger-line:nth-child(1) {
  74.     max-width: 30px;
  75.   }
  76.   .header__burger-line:nth-child(2) {
  77.     max-width: 25px;
  78.   }
  79. }
  80.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement