How can I add a button with a gradient border to my website?

My issue is that the button appears very small, and I'm adjusting the height or width below does nothing.

I've input the code into my WordPress site using Elementor, I just dragged a HTML widget and pasted the below code.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}
.btn {
  padding: 20px 60px;
  border: none;
  outline: none;
  position: relative;
  z-index: 1;
  border-radius: 5px;
  background: linear-gradient(to right, #00FFA3, #DC1FFF);
  cursor: pointer;
}
.btn::before {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 1px;
  bottom: 1px;
  border-radius: 4px;
  background-color: white;
  z-index: -1;
  transition: 200ms
}
.btn::after {
  content: attr(data);
  font-size: 16px;
  background: linear-gradient(to left, #00FFA3, #DC1FFF);
  -webkit-background-clip: text;
  color: transparent;
  transition: 200ms
}
.btn:hover::before {
  opacity: 50%;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}
.btn:hover::after{
  color: white;
}






body .container {
  height: 10vh;
  width: 20vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}

body .btn {
  padding: 20px 60px;
  border: none;
  outline: none;
  position: relative;
  z-index: 1;
  border-radius: 5px;
  background: linear-gradient(to right, #00FFA3, #DC1FFF);
  cursor: pointer;
}

body .btn::before {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 1px;
  bottom: 1px;
  border-radius: 4px;
  background-color: white;
  z-index: -1;
  transition: 200ms;
}

body .btn::after {
  content: attr(data);
  font-size: 16px;
  background: linear-gradient(to left, #00FFA3, #DC1FFF);
  -webkit-background-clip: text;
  color: transparent;
  transition: 200ms;
}

body .btn:hover::before {
  opacity: 50%;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

body .btn:hover::after {
  color: white;
}

<!-- language: lang-html -->

<div class="container">
  <button class="btn" data="Click me"></button>
</div>

<!-- end snippet -->

I do your button bigger than on your page (just on .btn write height and width).

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.container {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}
.btn {
padding: 20px 60px;
border: none;
outline: none;
position: relative;
z-index: 1;
border-radius: 5px;
background: linear-gradient(to right, #00FFA3, #DC1FFF);
cursor: pointer;
width: 550px;
#do width height: 150px;
# do height
}
So good day;
) .btn::before {
content: "";
position: absolute;
left: 1px;
right: 1px;
top: 1px;
bottom: 1px;
border-radius: 4px;
background-color: white;
z-index: -1;
transition: 200ms
}
.btn::after {
content: attr(data);
font-size: 16px;
background: linear-gradient(to left, #00FFA3, #DC1FFF);
-webkit-background-clip: text;
color: transparent;
transition: 200ms
}
.btn:hover::before {
opacity: 50%;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
.btn:hover::after {
color: white;
}

<!-- language: lang-html -->

<div class="container">
  <button class="btn" data="Click me"></button>
</div>

<!-- end snippet -->

I've tested your code and it looks like width and height is adjustable... Also you don't need to change .container width/height to change button size, you have to adjust padding attribute of .btn element. If adjusting padding attribute doesn't work it might be that your CSS is overwritten by Elementor/Theme, try to add !important to your padding attributes e.g padding: 20px 60px !important;

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.container {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}
.btn {
padding: 30px 70px !important;
border: none;
outline: none;
position: relative;
z-index: 1;
border-radius: 5px;
background: linear-gradient(to right, #00FFA3, #DC1FFF);
cursor: pointer;
}
.btn::before {
content: "";
position: absolute;
left: 1px;
right: 1px;
top: 1px;
bottom: 1px;
border-radius: 4px;
background-color: white;
z-index: -1;
transition: 200ms
}
.btn::after {
content: attr(data);
font-size: 16px;
background: linear-gradient(to left, #00FFA3, #DC1FFF);
-webkit-background-clip: text;
color: transparent;
transition: 200ms
}
.btn:hover::before {
opacity: 50%;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
.btn:hover::after{
color: white;
}

<!-- language: lang-html -->

<div class="container">
  <button class="btn" data="Click me"></button>
</div>

<!-- end snippet -->

To figure out if it is overwritten, press F12 to open DevTools and check your .btn CSS. If it's crossed out that means it's overwritten:

Setting the height and width in the .btn style allows you to change the button size.

.btn {
height: 200px;
width: 400px;
padding: 20px 60px;}