{"id":5353,"date":"2024-04-14T21:51:07","date_gmt":"2024-04-14T13:51:07","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5353"},"modified":"2024-04-14T22:31:55","modified_gmt":"2024-04-14T14:31:55","slug":"soft-ui-button","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/soft-ui-button\/","title":{"rendered":"Soft UI button"},"content":{"rendered":"
Soft UI emerged from skeuomorphic design and evolved to establish a completely new user experience style. In this tutorial, you will discover more about this aesthetic and how to craft a button using the following:<\/p>\n
    \n
  1. Base color<\/li>\n
  2. Primary shade<\/li>\n
  3. Secondary shade<\/li>\n
  4. Hover effect<\/li>\n<\/ol>\n
    \n
    <\/div>\n<\/figure>\n

    Base color<\/h2>\n

    When designing a soft UI styled button – you aim to ensure the base color of the button aligns with the background color of the container. For instance, we will synchronize the default background hue of a Button<\/strong> component with the top section in our project.<\/p>\n

    \n
    <\/div>\n<\/figure>\n

    To synchronize the background tones:<\/p>\n

      \n
    1. Introduce a Button<\/strong> element into your workspace<\/li>\n
    2. After selecting the Button<\/strong>, assign a class name in the Selector<\/strong> field (e.g. “Button”)<\/li>\n
    3. In the Style panel<\/strong>, utilize the eyedropper to pick the color of the section and apply it to the Button’s<\/strong> background<\/li>\n<\/ol>\n
      \n
      <\/div>\n<\/figure>\n

      Now, you have a button that matches the background color of your top section.<\/p>\n

      \n
      <\/div>\n<\/figure>\n

      Base design completed. Next, let’s enhance the button’s appearance by crafting the primary shadow (the shadow at the bottom-right corner of the button).<\/p>\n

      Primary shade<\/h2>\n

      We shall introduce a shadow effect at the bottom-right edge of the soft UI button. Moreover, you have the flexibility to adjust the shadow settings to achieve the desired visual effect.<\/p>\n

      \n
      <\/div>\n<\/figure>\n

      To introduce the initial shadow:<\/p>\n

        \n
      1. With the Button<\/strong> selected, click the plus icon beside Box shadow<\/strong> in the Style panel<\/strong><\/li>\n
      2. Tailor the Box shadow<\/strong> settings to suit your design (e.g. modify the Distance<\/strong>, Blur<\/strong>, Size<\/strong>, and Color<\/strong>)<\/li>\n<\/ol>\n
        \n
        <\/div>\n<\/figure>\n

        Opting for a darker shade for the initial shadow (e.g. #000000 or black) and then decreasing the opacity of the darker hue (e.g. adjusting the opacity to 80%) allows the shadow to blend seamlessly with the background color, resulting in a more lifelike effect.<\/p>\n

        Secondary shade<\/h2>\n

        Let’s introduce another shadow, but this time, we will alter the angle to the opposite side (to create an offset from the first shadow). Besides, given that the first shadow is dark, we will use a lighter hue for the second shadow (e.g. #ffffff or white).<\/p>\n

        <\/p>\n

        To create the second shadow:<\/p>\n

          \n
        1. With the Button<\/strong> selected, once more, click the plus icon beside Box shadow<\/strong> in the Style panel<\/strong> to generate a second shadow<\/li>\n
        2. Adjust the Box shadow<\/strong> settings to a lighter hue (e.g. #ffffff or white)<\/li>\n<\/ol>\n
          \n
          <\/div>\n<\/figure>\n

          Nota bene<\/strong>: if your background hue is white, this technique may not be effective. Soft UI buttons necessitate a shadow that is darker than the background on one side and lighter than the background on the other side.<\/p>\n

          Hover animation<\/h2>\n

          Transitions play a key role in producing a seamless animation when transitioning between different states of an element.<\/p>\n

          Our objective in this instance is as follows: we aim to modify the shadows slightly when the button is hovered over to mimic a lifted appearance.<\/p>\n

          Hover state<\/h3>\n

          By selecting our Button<\/strong>, we will navigate to the Hover<\/strong> state.<\/p>\n

          <\/p>\n

          This can be accomplished in two simple steps:<\/p>\n

            \n
          1. Click the drop-down arrow in the Selector<\/strong> section<\/li>\n
          2. Choose the Mouseover<\/strong> effect<\/li>\n<\/ol>\n
            \n
            <\/div>\n<\/figure>\n

            After that, navigate to the Shadow properties (while in the Mouseover<\/strong> effect) to customize both the initial and secondary shadows.<\/p>\n

            Expand the shadow size, and fine-tune all shadow attributes to achieve a hover effect that gives the appearance of a lifted button.<\/p>\n

            \n
            <\/div>\n<\/figure>\n

            Press the Esc<\/strong> key to revert to the Normal<\/strong> state and preview the Mouseover<\/strong> effect on the design canvas.<\/p>\n

            \n
            <\/div>\n<\/figure>\n

            Smooth Transition<\/h3>\n

            To ensure a seamless and gradual animation, let’s set up a transition.<\/p>\n

            With the neumorphic button chosen, access the Transitions <\/strong>segment within the Styling panel<\/strong>. Introduce a Box-shadow<\/strong> transition (as that’s the element we wish to animate), and specify the duration of the animation.<\/p>\n

            \n
            <\/div>\n<\/figure>\n

            That concludes the process! You have now successfully created a neumorphic button in Webflow.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Apply neumorphism to your site to achieve a soft UI design","protected":false},"author":2,"featured_media":5158,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-5353","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5353","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=5353"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5353\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5145"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5353"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5353"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}