Button

A button in HTML is an interactive element that users can click on. It's used for submitting forms, triggering JavaScript functions, and other interactive features on a webpage.

For our example, here's an HTML and CSS example for styling a button:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: blue;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px;
    border: none;
}

.button:hover {
    background-color: navy;
}
</style>
</head>
<body>

<button class="button">Click Me!</button>

</body>
</html>

In this code:

  • <button class="button">Click Me!</button> is our button element.

  • Inside the <style> tags, we've added CSS to style the button:

    • The button has a blue background color and white text.

    • It's padded to make it larger and more clickable.

    • It has a rounded border with a radius of 8 pixels.

    • The .button:hover style changes the button's background color to navy when the mouse hovers over it, adding a visual cue that it's an interactive element.

When you put this code in an HTML file and view it in a web browser, you'll see a styled button that changes color when you hover over it, illustrating a basic interactive element on a webpage.

In Jux the button is pre-built with all the interactive states. This is why the anchor for hover comes from the element in Jux. We are rendering a live component that is the <button> tag like seen above. So all of the aspects of that element are baked in the element and thus allowing designers and developers to collaborate

Jux button element is an HTML interactive button that can be easily designed and used. View the layers structure, you can reorder the layers, remove children, and also add your own. The button has prebuilt interactive states: Idle (default), hover and active, and props: Hierarchy (PrImary and Secondary) and Disable prop to indicate if it is disable or not.

In order to edit the states and props move between their combinations in the props dropdown fields at the top of the DDP. In order to design it’s children, the text and the icons - just select them and manipulate the styles. You can remove children as needed or design them in parent context.

Here is the button states and props matrix for better understanding of what can be designed. Soon this matrix will be added to Jux canvas 🙂

PreviousDivNextInput

Last updated