How to make

Question

I want to take Reset Beside Pay Now

(Assist me with it)

 



input[type="submit"] {
    background-color: rgb(4, 18, 99);
    color: #fff;
    padding: 15px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    width: 50%;
}
input[type="reset"] {
  background-color: rgb(4, 18, 99);
    color: #fff;
    padding: 15px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    width: 50%;
}

input[type="submit"]:hover{
    background-color:rgb(66, 6, 143)
}

  </p>
    <input type="submit" value="Pay Now">
</p>
<p>
  <input type="reset" value="Reset">
     </p>

I am getting this result which is posted below I've done replacing it But it's not working

What is "this result"? What do you want to achieve? Where are you stuck? And how is this question related to [tag:payment-gateway]? — Nico Haase, Aug 12 '21 at 08:42
The buttons are within ( or sort of within ) paragraph tags - why? You could tweak the display properties for the `P` tag to make them display inline. Incidentally the HTML is incorrect as there is no opening paragraph tag before first button... — Professor Abronsius, Aug 12 '21 at 08:42

UModeL · Answer 1 · 2021-08-12T09:17:13.260

By default, the tag <p> is a block element and always starts with a new line. Therefore, the buttons (wrapped each separately in this tag) cannot be lined up in the string, with existing styles and markup.

The solution is simple - wrap the buttons to the shared tag <p> and position the buttons in it using Flex.

p {
  display: flex;
  gap: 10px;
}

input[type="submit"],
input[type="reset"] {
  background-color: rgb(4, 18, 99);
  color: #fff;
  padding: 15px 20px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  width: 50%;
}

input[type="submit"]:hover {
  background-color: rgb(66, 6, 143)
}

<p>
  <input type="submit" value="Pay Now">
  <input type="reset" value="Reset">
</p>

Please add some explanation to your answer such that others can learn from it — Nico Haase, Aug 12 '21 at 08:52

score 0 · Answer 2 · answered Aug 12 '21 at 08:49

If these buttons are to be within p tags as shown above then you need to modify the css for the p tag - probably best done with a particular class assigned to the paragraph elements however. The easiest would be to place both buttons within the same containing element and then set properties for the buttons - such as display:inline-block and margin

input[type="submit"],
input[type="reset"] {
  background-color: rgb(4, 18, 99);
  color: #fff;
  padding: 15px 20px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  width: 50%;
  display:block;
  width:150px
}

input[type="submit"]:hover,
input[type="reset"]:hover{
  background-color:rgb(66, 6, 143)
}

p.inline{
  display:inline-block;
  clear:none;
  margin:0;
}

<p>Suspendisse potenti. Maecenas non nisl elementum, laoreet ligula non, aliquam purus. Ut ac nunc commodo nisl ultrices elementum. Proin nec eros sem. Sed varius fermentum ullamcorper. Sed rutrum quam vel sem pretium, sit amet interdum nisi hendrerit. Sed ut lorem at neque bibendum maximus. </p>
<p class='inline'>
  <input type="submit" value="Pay Now">
</p>
<p class='inline'>
  <input type="reset" value="Reset">
</p>

How to make

2 Answers2