button ani

styles/button.css

@@ -0,0 +1,81 @@
+
+.thizh {
+     min-width: 150px;
+     min-height: 40px;
+     display: inline-flex;
+     align-items: center;
+     justify-content: center;
+     text-align: center;
+     font-weight: 700;
+     color: #313133;
+     background: #4FD1C5;
+     background: linear-gradient(90deg, rgba(129, 230, 217, 1) 0%, rgba(79, 209, 197, 1) 100%);
+     border: none;
+     border-radius: 1000px;
+     box-shadow: 12px 12px 24px rgba(79, 209, 197, .64);
+     transition: all 0.3s ease-in-out 0s;
+     cursor: pointer;
+     outline: none;
+     position: relative;
+     padding: 10px;
+ }
+
+ .thizh::before {
+     content: '';
+     border-radius: 1000px;
+     min-width: calc(170px + 12px);
+     min-height: calc(30px + 12px);
+     border: 6px solid #00FFCB;
+     box-shadow: 0 0 60px rgba(0, 255, 203, .64);
+     position: absolute;
+     top: 50%;
+     left: 50%;
+     transform: translate(-50%, -50%);
+     opacity: 0;
+     transition: all .3s ease-in-out 0s;
+ }
+
+ .thizh:hover,
+ .thizh:focus {
+     color: #313133;
+     transform: translateY(-6px);
+ }
+
+ .thizh:hover::before,
+ .thizh:focus::before {
+     opacity: 1;
+ }
+
+ .thizh::after {
+     content: '';
+     width: 30px;
+     height: 30px;
+     border-radius: 100%;
+     border: 6px solid #00FFCB;
+     position: absolute;
+     z-index: -1;
+     top: 50%;
+     left: 50%;
+     transform: translate(-50%, -50%);
+     animation: ring 1.5s infinite;
+ }
+
+ .thizh:hover::after,
+ .thizh:focus::after {
+     animation: none;
+     display: none;
+ }
+
+ @keyframes ring {
+     0% {
+         width: 30px;
+         height: 30px;
+         opacity: 1;
+     }
+
+     100% {
+         width: 300px;
+         height: 300px;
+         opacity: 0;
+     }
+ }