[Styling Module] Mobile Styled Buttons

[u8915055]

Module post template

Mobile Styled Buttons

Version: v1.0
Creator: u8915055 (https://github.com/u8915055)

Important

Unsupported cards:

• Cover
• Climate
• Horizontal buttons stack
• Media player
• Pop-up
• Select
• Separator

This is a set of 5 styles that i have been experimenting with to enable a better layout of buttons on a phone. I have played with the icon sizing and placement, the font size, the card height etc. I want to try to avoid text scrolling where possible.. You can certainly continue to tweak any of these. Im using most of these with switches and/or light sliders. Feedback is welcome and I'd also like to know if you prefer any of these styles over others. In the screenshot, i have numbered the styles as the following. The original one is just a 1/2 width button with no added stylings.
original 1
2 3
4 5

moble_style_1:
  name: "Mobile styled buttons - style 1"
  version: "v1.0"
  creator: "u8915055"

  unsupported:
      - cover
      - climate
      - horizontal-buttons-stack
      - media-player
      - pop-up
      - select
      - separator
  
  code: |
      .bubble-state {
          font-size: .7em;
          line-height: 1em;
      }
      .bubble-name {
          font-size: .85em;
      }
      .bubble-icon-container {
          border-radius: 25.45px 8px 8px 25.45px;
          min-width: 28px !important;
          --mdc-icon-size: 20px !important;
      }

mobile_style_2:
  name: "Mobile styled buttons - style 2"
  version: "v1.0"
  creator: "u8915055"

  unsupported:
      - cover
      - climate
      - horizontal-buttons-stack
      - media-player
      - pop-up
      - select
      - separator
  
  code: |
        .bubble-state {
            font-size: .7em;
            line-height: 1em;
        }
        .bubble-name {
            font-size: .85em;
        }
        div.bubble-button-container {
            max-height: 40px;
        }
        div.bubble-icon-container {
            margin-left: 0px !important;
        }

mobile_style_3:
  name: "Mobile styled buttons - style 3"
  version: "v1.0"
  creator: "u8915055"

  unsupported:
      - cover
      - climate
      - horizontal-buttons-stack
      - media-player
      - pop-up
      - select
      - separator
  
  code: |
      .bubble-state {
          font-size: .7em;
          line-height: 1em;
      }
      .bubble-name {
          font-size: .85em;
      }
      div.bubble-button-container {
          max-height: 40px;
      }
      .bubble-icon-container {
          margin-left: 0px !important;
          border-radius: 0px !important;
          min-width: 38px !important;
      }

mobile_style_4:
  name: "Mobile styled buttons - style 4"
  version: "v1.0"
  creator: "u8915055"

  unsupported:
      - cover
      - climate
      - horizontal-buttons-stack
      - media-player
      - pop-up
      - select
      - separator
  
  code: |
      .bubble-state {
          font-size: .7em;
          line-height: 1em;
      }
      .bubble-name {
          font-size: .85em;
      }
      div.bubble-button-container {
          max-height: 40px;
      }
      div.bubble-icon-container {
          margin-left: 3px !important;
          border-radius: 20px 0px 0px 20px !important;
          min-width: 36px !important;
          min-height: 35px !important;
      }

mobile_style_5:
  name: "Mobile styled buttons - style 5"
  version: "v1.0"
  creator: "u8915055"

  unsupported:
      - cover
      - climate
      - horizontal-buttons-stack
      - media-player
      - pop-up
      - select
      - separator
  
  code: |
      .bubble-state {
          font-size: .7em;
          line-height: 1em;
      }
      .bubble-name {
          font-size: .85em;
      }
      div.bubble-button-container {
          max-height: 40px;
      }
      div.bubble-icon-container {
          margin-left: 3px !important;
          border-radius: 20px 8px 8px 20px !important;
          min-width: 36px !important;
          min-height: 35px !important;
      }

---

🧩 Get this Module

To use this module, simply copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

mobile_style_1:
  name: "Mobile styled buttons - style 1"
  version: "v1.0"
  creator: "u8915055"

  unsupported:
      - cover
      - climate
      - horizontal-buttons-stack
      - media-player
      - pop-up
      - select
      - separator
  
  code: |
      .bubble-state {
          font-size: .7em;
          line-height: 1em;
      }
      .bubble-name {
          font-size: .85em;
      }
      .bubble-icon-container {
          border-radius: 25.45px 8px 8px 25.45px;
          min-width: 28px !important;
          --mdc-icon-size: 20px !important;
      }

mobile_style_2:
  name: "Mobile styled buttons - style 2"
  version: "v1.0"
  creator: "u8915055"

  unsupported:
      - cover
      - climate
      - horizontal-buttons-stack
      - media-player
      - pop-up
      - select
      - separator
  
  code: |
        .bubble-state {
            font-size: .7em;
            line-height: 1em;
        }
        .bubble-name {
            font-size: .85em;
        }
        div.bubble-button-container {
            max-height: 40px;
        }
        div.bubble-icon-container {
            margin-left: 0px !important;
        }

mobile_style_3:
  name: "Mobile styled buttons - style 3"
  version: "v1.0"
  creator: "u8915055"

  unsupported:
      - cover
      - climate
      - horizontal-buttons-stack
      - media-player
      - pop-up
      - select
      - separator
  
  code: |
      .bubble-state {
          font-size: .7em;
          line-height: 1em;
      }
      .bubble-name {
          font-size: .85em;
      }
      div.bubble-button-container {
          max-height: 40px;
      }
      .bubble-icon-container {
          margin-left: 0px !important;
          border-radius: 0px !important;
          min-width: 38px !important;
      }

mobile_style_4:
  name: "Mobile styled buttons - style 4"
  version: "v1.0"
  creator: "u8915055"

  unsupported:
      - cover
      - climate
      - horizontal-buttons-stack
      - media-player
      - pop-up
      - select
      - separator
  
  code: |
      .bubble-state {
          font-size: .7em;
          line-height: 1em;
      }
      .bubble-name {
          font-size: .85em;
      }
      div.bubble-button-container {
          max-height: 40px;
      }
      div.bubble-icon-container {
          margin-left: 3px !important;
          border-radius: 20px 0px 0px 20px !important;
          min-width: 36px !important;
          min-height: 35px !important;
      }

mobile_style_5:
  name: "Mobile styled buttons - style 5"
  version: "v1.0"
  creator: "u8915055"

  unsupported:
      - cover
      - climate
      - horizontal-buttons-stack
      - media-player
      - pop-up
      - select
      - separator
  
  code: |
      .bubble-state {
          font-size: .7em;
          line-height: 1em;
      }
      .bubble-name {
          font-size: .85em;
      }
      div.bubble-button-container {
          max-height: 40px;
      }
      div.bubble-icon-container {
          margin-left: 3px !important;
          border-radius: 20px 8px 8px 20px !important;
          min-width: 36px !important;
          min-height: 35px !important;
      }

---

Screenshot:

-> Drag and drop/Upload one (or more) screenshot here

Before posting your module

• I've replaced all lines starting with ->
• I've updated the unsupported cards above the description and under the unsupported property
• I've added a screenshot
• I've chosen a unique your_module_key
• I really enjoyed working on this module ❤️