3D Button Style

[stanleysg]

Is there an easy way to give the “large buttons”:

class=”btn btn-primary btn-lg”

a 3D look and feel? Kind of like the Submit button on this form to open a ticket.

---

[Support]

Hello, you can add a border in the button, add this:

(css/custom.css)

.btn.btn-primary.btn-lg {
    border-bottom: 3px solid #027bbf;
}

Let me know if you have any questions.

Thanks.

---

[stanleysg]

Hi, I may be doing something wrong. But that doesn’t seem to work in for example:

<a data-hash href="#" class="btn btn-lg btn-primary">Hello world</a>

---

[Support]

Hello, can you please send me the URL so I can check if there’s a conflict CSS?

Thanks.

---

[stanleysg]

It’s on my local machine, but good idea to check. I looked through it and it looks like there was a conflict with:

.btn-primary, .pagination > .active > a
{
  border-color: #08c !important;
}

So I added !important to the code you gave and it seemed to work. Is this the right way to go about it?

Lastly, is there a way to make it look more 3D like the “Submit” button in “Open a Ticket”?

---

[Support]

Hello, sure, you can add a border like this:

.btn-primary, .pagination > .active > a {
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25) !important;
}

Let me know if you have any questions.

Thanks.

---

[Author]

Posts