Question T11997
Visible to All Users

Button implementation

created 2 years ago

Hello support team,

Is it possible to change the main survey button with the below example?
The CSS part is easy to implement, but what about this type of HTML button with <span> containers?

HTML
<button class="pushable"> <span class="shadow"></span> <span class="edge"></span> <span class="front">OK! NEXT</span> </button>
CSS
<style> .pushable { position: relative; border: none; background: transparent; padding: 0; cursor: pointer; outline-offset: 4px; transition: filter 250ms; user-select: none; -webkit-tap-highlight-color: transparent; } .shadow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px; background: hsl(0deg 0% 0% / 0.25); will-change: transform; transform: translateY(2px); transition: transform 600ms cubic-bezier(.3, .7, .4, 1); } .edge { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px; background: linear-gradient(to left, hsl(148deg, 96%, 16%) 0%, hsl(148deg, 96%, 32%) 8%, hsl(148deg, 96%, 32%) 92%, hsl(148deg, 96%, 16%) 100%); } .front { display: block; position: relative; padding: 12px 30px; border-radius: 12px; font-size: 1.25rem; font-weight: 600; color: white; background: hsl(148deg, 96%, 28%); will-change: transform; transform: translateY(-6px); transition: transform 600ms cubic-bezier(.3, .7, .4, 1); } .pushable:hover { filter: brightness(110%); } .pushable:hover .front1 { transform: translateY(-8px); transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5); } .pushable:active .front1 { transform: translateY(-2px); transition: transform 34ms; } .pushable:hover .shadow1 { transform: translateY(4px); transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5); } .pushable:active .shadow1 { transform: translateY(1px); transition: transform 34ms; } .pushable:focus:not(:focus-visible) { outline: none; } </style>

Thank you.

Answers approved by surveyjs Support

created 2 years ago

Hello,
You can handle a custom button's onclick function and call the survey.nextPage function to switch to the next survey page (example).

JavaScript
<button class="pushable" onclick="window.navSurvey.nextPage();"> <span class="shadow"></span> <span class="edge"></span> <span class="front">OK! NEXT</span> </button>

Please refer to the following demos for more details:

Let me know if you have any questions or require further assistance.

    Comments (2)

      Thank you for the info.

      And how can I replace the default next page button with this one:

      JavaScript
      <button class="pushable" onclick="window.navSurvey.nextPage();"> <span class="shadow"></span> <span class="edge"></span> <span class="front">OK! NEXT</span> </button>

      Best regards.

        You can replace the default navigation bar and use custom buttons to navigate between survey pages.
        Please check the Navigation | Custom Navigation demo.