Breaking News: Grepper is joining You.com. Read the official announcement!

Button with Gradient border with react

Abhishek answered on July 19, 2024 Popularity 1/10 Helpfulness 1/10

answer Button with Gradient border with react

Button with Gradient border with react

Comment

 // file: index.scss
.btn-gradient-hover {
  position: relative;
  z-index: 1;
  color: theme.$dark;
  border: none;

  &:before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 200px;
    background: linear-gradient(125deg, theme.$accent1, theme.$accent2);
    backface-visibility: hidden;
    transition: all 0.45s cubic-bezier(0.25, 1, 0.33, 1);
    z-index: -2;
  }

  &:after {
    display: block;
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: 200px;
    background-color: #fff;
    backface-visibility: hidden;
    transition: all 0.45s cubic-bezier(0.25, 1, 0.33, 1);
    color: theme.$primary !important;
    z-index: -1;
  }

  &:hover {
    color: #fff;
    svg {
      path {
        stroke: #fff;
      }
    }

    &:after {
      opacity: 0;
    }
  }

  &:disabled {
    cursor: not-allowed;
    color: theme.$primary;
    &:before {
      opacity: 0.65;
    }

    &:after {
      opacity: 0.65;
    }
  }

  &:active {
    color: theme.$primary !important;
  }

  &:focus-visible {
    box-shadow: none;
    color: theme.$primary;
  }
}


// Use like this way

			import { Button } from "react-bootstrap";
 				<Button
                    size="sm"
                    variant="gradient-hover"
                  >
                    Create User
                  </Button>

Popularity 1/10 Helpfulness 1/10 Language css

Source: Grepper

Tags: border button css gradient

Link to this answer
Share Copy Link

Contributed on Jul 19 2024

Abhishek

0 Answers Avg Quality 2/10

Button with Gradient border with react

Contents

More Related Answers

Button with Gradient border with react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.