Question 201835 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – Struggling to add a Button with a gradient border to my website

So, I feel like I’ve tried everything. I’m a beginner at programming so I’m obviously going wrong somewhere.

So 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.

.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;
}
<div class="container">
  <button class="btn" data="Click me"></button>
</div>
Tags:

3

Answers


  1. 0

    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;

    .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;
}
    <div class="container">
  <button class="btn" data="Click me"></button>
</div>
    Login or Signup to reply.
  2. 0

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

    <head>
  <style>
  .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;
  }
  
  </style>
</head>

<body>
    
    <div class="container">
        <button class="btn" data="Click me"></button>
      </div>
</body>
    Login or Signup to reply.
  3. 0

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

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

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search