Botão telegram flutuante

SUBMITTED BY: jose22

DATE: Jan. 19, 2024, 3:35 a.m.

UPDATED: Feb. 4, 2024, 6:28 p.m.

FORMAT: Text only

SIZE: 2.5 kB

History Raw Download

HITS: 591

Report
  1. <a href="SEULINKAQUI" class="float">
  2. <svg class="icon">
  3. <path
  4. d="M0,17.46A3.22,3.22,0,0,1,1.87,16q4.62-1.8,9.26-3.56L42.84.25A3.55,3.55,0,0,1,43.61,0,2,2,0,0,1,46,2.18a17.08,17.08,0,0,1-.45,2.91Q42.3,20.44,39,35.77a6.38,6.38,0,0,1-.53,1.52,1.79,1.79,0,0,1-2.27,1,4.87,4.87,0,0,1-1.36-.65c-3.3-2.39-6.58-4.8-9.87-7.21l-.42-.31c-.13.12-.26.22-.37.33l-5,4.81a2.46,2.46,0,0,1-1.83.75c0-.65.08-1.29.13-1.92.2-2.81.39-5.62.61-8.43a1,1,0,0,1,.3-.59Q27.9,16.42,37.47,7.84s.1-.07.13-.12L38,7.05a2.48,2.48,0,0,0-.82-.14,2.47,2.47,0,0,0-.89.41q-11.9,7.42-23.8,14.87a.85.85,0,0,1-.64.11Q6.73,20.76,1.68,19.17A2.72,2.72,0,0,1,0,18Z" />
  5. </svg>
  6. </a>
  7. <style>
  9. :root {
  10. --icon-color: #fff;
  11. --icon-hover: #fff;
  12. --background-color: #0060ff;
  13. --background-hover: #0044b3
  14. }
  16. .icon {
  17. width: 48px;
  18. height: 48px;
  19. transform: scale(0.6) translate(15%, 28%);
  20. fill: var(--icon-color)
  21. }
  23. .float {
  24. position: fixed;
  25. cursor: pointer;
  26. width: 60px;
  27. height: 60px;
  28. bottom: 40px;
  29. right: 40px;
  30. transition: 1s;
  31. background-color: var(--background-color);
  32. border-radius: 50px;
  33. animation: pulse 3s infinite;
  34. -webkit-animation: pulse 3s infinite;
  35. -moz-animation: pulse 3s infinite;
  36. -o-animation: pulse 3s infinite;
  37. z-index: 9000
  38. }
  40. .float:hover {
  41. background-color: var(--background-hover)
  42. }
  44. .float:hover .icon {
  45. fill: var(--icon-hover)
  46. }
  48. @keyframes pulse {
  49. 0% {
  50. -webkit-box-shadow: 0 0 0 0 rgba(0, 96, 255, 1)
  51. }
  53. 70% {
  54. -webkit-box-shadow: 0 0 0 20px rgba(0, 96, 255, 0)
  55. }
  57. 100% {
  58. -webkit-box-shadow: 0 0 0 0 rgba(0, 96, 255, 0)
  59. }
  60. }
  62. @-webkit-keyframes pulse {
  63. 0% {
  64. -webkit-box-shadow: 0 0 0 0 rgba(0, 96, 255, 1)
  65. }
  67. 70% {
  68. -webkit-box-shadow: 0 0 0 20px rgba(0, 96, 255, 0)
  69. }
  71. 100% {
  72. -webkit-box-shadow: 0 0 0 0 rgba(0, 96, 255, 0)
  73. }
  74. }
  76. @-moz-keyframes pulse {
  77. 0% {
  78. -webkit-box-shadow: 0 0 0 0 rgba(0, 96, 255, 1)
  79. }
  81. 70% {
  82. -webkit-box-shadow: 0 0 0 20px rgba(0, 96, 255, 0)
  83. }
  85. 100% {
  86. -webkit-box-shadow: 0 0 0 0 rgba(0, 96, 255, 0)
  87. }
  88. }
  90. @-o-keyframes pulse {
  91. 0% {
  92. -webkit-box-shadow: 0 0 0 0 rgba(0, 96, 255, 1)
  93. }
  95. 70% {
  96. -webkit-box-shadow: 0 0 0 20px rgba(0, 96, 255, 0)
  97. }
  99. 100% {
  100. -webkit-box-shadow: 0 0 0 0 rgba(0, 96, 255, 0)
  101. }
  102. }
  103. </style>
comments powered by Disqus