hw4

src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.module.css

@@ -0,0 +1,88 @@
+@keyframes blink {
+    0% {
+        left: -130%;
+    }
+    100% {
+        left: 130%;
+    }
+}
+
+.default {
+    background: #003300;
+    color: #99ff99;
+    outline: none;
+}
+
+.red {
+    background: #dd3355;
+}
+
+.disabled {
+    color: #005500;
+}
+
+.button {
+    position: relative;
+    margin: 10px;
+    overflow: hidden;
+    cursor: pointer;
+}
+
+.button::after {
+    display: block;
+    content: '';
+    position: absolute;
+
+    left: -130%;
+    top: 0;
+    height: 100%;
+    width: 20%;
+
+    transform: skew(45deg);
+
+    background-color: #ffffff;
+    opacity: 0.7;
+
+    z-index: 14;
+}
+
+.button:hover::after {
+    animation: blink 0.35s ease; /*https://html5book.ru/css3-animation/*/
+}
+
+.button:hover::before {
+    display: block;
+    content: '';
+    position: absolute;
+
+    left: -100vw;
+    top: 0;
+    height: 100vh;
+    width: 300vw;
+
+    background-color: #ffffff;
+    opacity: 0.2;
+
+    z-index: 7;
+}
+
+.button:focus {
+    outline: #99ff99 solid 1px;
+}
+
+.button:active {
+    background: #99ff99;
+    color: #003300;
+}
+
+.button:disabled {
+    cursor: no-drop;
+}
+
+.button:disabled::after {
+    z-index: -1;
+}
+
+.button:disabled::before {
+    z-index: -1;
+}

src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.tsx

@@ -0,0 +1,35 @@
+import React, {ButtonHTMLAttributes, DetailedHTMLProps} from 'react'
+import s from './SuperButton.module.css'
+
+// тип пропсов обычной кнопки, children в котором храниться название кнопки там уже описан
+type DefaultButtonPropsType = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
+
+type SuperButtonPropsType = DefaultButtonPropsType & {
+    xType?: string
+}
+
+const SuperButton: React.FC<SuperButtonPropsType> = (
+    {
+        xType, className,
+        disabled,
+        ...restProps// все остальные пропсы попадут в объект restProps, там же будет children
+    }
+) => {
+    const finalClassName = `${s.button} ${
+        disabled
+            ? s.disabled
+            : xType === 'red'
+                ? s.red
+                : s.default
+    } ${className}` // задачка на смешивание классов
+
+    return (
+        <button
+            disabled={disabled}
+            className={finalClassName}
+            {...restProps} // отдаём кнопке остальные пропсы если они есть (children там внутри)
+        />
+    )
+}
+
+export default SuperButton