仿腾讯视频按钮

效果图

index

import React from 'react'
import styles from './style.less'
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
const contentStyle = {  // 是背景渐变 而不是给文字添加颜色 所需要的属性
    cursor: 'pointer',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
};
const index = () =>
{
    return (
        <div>
            <div className={styles.container} >
                <div className={styles.left}>
                    <LeftOutlined />
                </div>
                <div className={styles.right}>
                    <RightOutlined />
                </div>
                <header style={contentStyle} className={styles.head}>后陈欢迎您</header>
            </div>
        </div >
    )
}

export default index

CSS

.container {
  position: relative;
  width: 1710px;
  height: 500px;
  margin: 100px auto;
  padding: 0 50px;
  background-color: rgba(53, 54, 116, 0.9);

  .left,
  .right {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    width: 46px;
    height: 46px;
    font-size: 24px;
    margin-top: 0;
    border-radius: 100%;
    color: rgba(255, 255, 255, .8);
    text-align: center;
    cursor: pointer;
    transition: background-color .5s;

    &:hover {
      background-color: rgba(0, 0, 0, .5);

    }
  }

  .right {
    top: 50%;
    right: 50px;
  }

  .head {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    font-size: 3em;
    letter-spacing: 1.5px;
    background: linear-gradient(to right, rgb(126, 228, 9) 30%, rgb(211, 19, 77) 100%);
  }
}