API tools faq
paste
pjarbit

Yaml custom button cards

pjarbit
Jun 13th, 2026
145
0
Never
1
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
YAML 12.06 KB | Source Code | 0 0
raw download clone embed print report
  1. type: vertical-stack
  2. cards:
  3.   - type: grid
  4.     columns: 1
  5.     square: false
  6.     cards:
  7.       - type: horizontal-stack
  8.         cards:
  9.           - type: custom:bubble-card
  10.             card_type: separator
  11.             name: ""
  12.             icon: ""
  13.             card_layout: normal
  14.             styles: |
  15.              :host {
  16.                 display: block !important;
  17.                 margin: -18px 10px 16px 0 !important;
  18.                 border-radius: 1px
  19.               }
  20.               .bubble-line {
  21.                 background-color: #00adb5 !important;
  22.                 height: 6px !important;
  23.                 opacity: 1 !important;
  24.                 margin: 0 !important;
  25.               }
  26.               .bubble-card-content {
  27.                 padding: 0 !important;
  28.                 margin: 0 !important;
  29.               }
  30.               ha-card {
  31.                 background: none !important;
  32.                 box-shadow: none !important;
  33.                 margin: 0 !important;
  34.                 padding: 0 !important;
  35.                 height: 6px !important;
  36.               }
  37.   - type: horizontal-stack
  38.     cards: []
  39.   - type: vertical-stack
  40.     cards:
  41.       - type: horizontal-stack
  42.         cards:
  43.           - type: custom:button-card
  44.             entity: input_boolean.family_room_low
  45.             icon: mdi:movie-filter-outline
  46.             name: Movie Night Low
  47.             tap_action:
  48.               action: call-service
  49.               service: script.movie_night_low_12
  50.             styles:
  51.               card:
  52.                 - background-color: rgba(67, 73, 82, 1) !important
  53.                 - border-radius: 10px !important
  54.                 - box-shadow: >
  55.                    12px 12px 24px rgba(0, 0, 0, 0.5), -4px -4px 8px rgba(255,
  56.                     255, 255, 0.1), inset -4px -4px 8px rgba(0, 0, 0, 0.2),
  57.                     inset 4px 4px 8px rgba(255, 255, 255, 0.2) !important
  58.                 - padding: 12px
  59.                 - overflow: hidden
  60.                 - position: relative
  61.                 - font-weight: 400
  62.               icon:
  63.                 - height: 50px
  64.                 - color: |
  65.                    [[[
  66.                       return states['input_boolean.family_room_low'].state === 'on' ? '#FFCA28' : 'rgba(241, 241, 241 ,0.7)';
  67.                     ]]]
  68.               name:
  69.                 - font-size: 16px
  70.                 - color: rgba(241, 241, 241, 0.9) !important
  71.           - type: custom:button-card
  72.             entity: input_boolean.family_room_mid
  73.             icon: mdi:movie-filter-outline
  74.             name: Movie Night Mid
  75.             tap_action:
  76.               action: call-service
  77.               service: script.movie_night_mid_25
  78.             styles:
  79.               card:
  80.                 - background-color: rgba(67, 73, 82, 1) !important
  81.                 - border-radius: 10px !important
  82.                 - box-shadow: >
  83.                    12px 12px 24px rgba(0, 0, 0, 0.5), -4px -4px 8px rgba(255,
  84.                     255, 255, 0.1), inset -4px -4px 8px rgba(0, 0, 0, 0.2),
  85.                     inset 4px 4px 8px rgba(255, 255, 255, 0.2) !important
  86.                 - padding: 12px
  87.                 - overflow: hidden
  88.                 - position: relative
  89.                 - font-weight: 400
  90.               icon:
  91.                 - height: 50px
  92.                 - color: |
  93.                    [[[
  94.                       return states['input_boolean.family_room_mid'].state === 'on' ? '#FFCA28' : 'rgba(241, 241, 241, 0.7)';
  95.                     ]]]
  96.               name:
  97.                 - font-size: 16px
  98.                 - color: rgba(241, 241, 241, 0.9) !important
  99.           - type: custom:button-card
  100.             entity: input_boolean.family_room_high
  101.             icon: mdi:movie-filter-outline
  102.             name: Movie Night High
  103.             tap_action:
  104.               action: call-service
  105.               service: script.turn_on
  106.               service_data:
  107.                 entity_id: script.movie_night_high_90
  108.             styles:
  109.               card:
  110.                 - background-color: rgba(67, 73, 82, 1) !important
  111.                 - border-radius: 10px !important
  112.                 - box-shadow: >
  113.                    12px 12px 24px rgba(0, 0, 0, 0.5), -4px -4px 8px rgba(255,
  114.                     255, 255, 0.1), inset -4px -4px 8px rgba(0, 0, 0, 0.2),
  115.                     inset 4px 4px 8px rgba(255, 255, 255, 0.2) !important
  116.                 - padding: 12px
  117.                 - overflow: hidden
  118.                 - position: relative
  119.                 - font-weight: 400
  120.               icon:
  121.                 - height: 50px
  122.                 - color: |
  123.                    [[[
  124.                       return states['input_boolean.family_room_high'].state === 'on' ? '#FFCA28' : 'rgba(241, 241, 241, 0.7)';
  125.                     ]]]
  126.               name:
  127.                 - font-size: 16px
  128.                 - color: rgba(241, 241, 241, 0.9) !important
  129.       - type: horizontal-stack
  130.         cards:
  131.           - type: custom:button-card
  132.             entity: input_boolean.kitchen_movie_night
  133.             icon: mdi:movie-filter-outline
  134.             name: Kitchen Movie Night
  135.             tap_action:
  136.               action: call-service
  137.               service: script.kitchen_movie_night
  138.             styles:
  139.               card:
  140.                 - background-color: rgba(67, 73, 82, 1) !important
  141.                 - border-radius: 10px !important
  142.                 - box-shadow: >
  143.                    12px 12px 24px rgba(0, 0, 0, 0.5), -4px -4px 8px rgba(255,
  144.                     255, 255, 0.1), inset -4px -4px 8px rgba(0, 0, 0, 0.2),
  145.                     inset 4px 4px 8px rgba(255, 255, 255, 0.2) !important
  146.                 - padding: 12px
  147.                 - overflow: hidden
  148.                 - position: relative
  149.                 - font-weight: 400
  150.               icon:
  151.                 - height: 54px
  152.                 - color: |
  153.                    [[[
  154.                       return states['input_boolean.kitchen_movie_night'].state === 'on' ? '#FFCA28' : 'rgba(241,241,241,0.8)';
  155.                     ]]]
  156.               name:
  157.                 - font-size: 16px
  158.                 - color: rgba(241, 241, 241, 0.9) !important
  159.           - type: custom:button-card
  160.             entity: input_boolean.people_over_sensor
  161.             icon: mdi:account-group
  162.             name: Guests Over
  163.             tap_action:
  164.               action: call-service
  165.               service: script.toggle_people_over
  166.             styles:
  167.               card:
  168.                 - background-color: rgba(67, 73, 82, 1) !important
  169.                 - border-radius: 10px !important
  170.                 - box-shadow: >
  171.                    12px 12px 24px rgba(0, 0, 0, 0.5), -4px -4px 8px rgba(255,
  172.                     255, 255, 0.1), inset -4px -4px 8px rgba(0, 0, 0, 0.2),
  173.                     inset 4px 4px 8px rgba(255, 255, 255, 0.2) !important
  174.                 - padding: 12px
  175.                 - overflow: hidden
  176.                 - position: relative
  177.                 - font-weight: 400
  178.                 - height: 100px
  179.               name:
  180.                 - font-size: 16px
  181.                 - color: rgba(241, 241, 241, 0.9) !important
  182.               icon:
  183.                 - height: 54px
  184.             state:
  185.               - value: "on"
  186.                 styles:
  187.                   icon:
  188.                     - color: rgba(255, 0, 0, 0.7) !important
  189.                     - height: 54px
  190.               - value: "off"
  191.                 styles:
  192.                   icon:
  193.                     - color: rgba(241, 241, 241, 0.7)
  194.                     - height: 54px
  195.           - type: custom:button-card
  196.             entity: input_boolean.dog_night_out
  197.             icon: mdi:dog
  198.             name: Dog Outside
  199.             tap_action:
  200.               action: call-service
  201.               service: script.toggle_dog_night_out
  202.             styles:
  203.               card:
  204.                 - background-color: rgba(67, 73, 82, 1) !important
  205.                 - border-radius: 10px !important
  206.                 - box-shadow: >
  207.                    12px 12px 24px rgba(0, 0, 0, 0.5), -4px -4px 8px rgba(255,
  208.                     255, 255, 0.1), inset -4px -4px 8px rgba(0, 0, 0, 0.2),
  209.                     inset 4px 4px 8px rgba(255, 255, 255, 0.2) !important
  210.                 - padding: 12px
  211.                 - overflow: hidden
  212.                 - position: relative
  213.                 - font-weight: 400
  214.                 - height: 98px
  215.               name:
  216.                 - font-size: 16px
  217.                 - color: rgba(241, 241, 241, 0.9) !important
  218.               icon:
  219.                 - height: 50px
  220.             state:
  221.               - value: "on"
  222.                 styles:
  223.                   icon:
  224.                     - color: rgba(255, 0, 0, 0.7) !important
  225.                     - height: 50px
  226.               - value: "off"
  227.                 styles:
  228.                   icon:
  229.                     - color: rgba(241,241,241,0.8)
  230.                     - height: 50px
  231.       - type: horizontal-stack
  232.         cards:
  233.           - type: custom:button-card
  234.             entity: input_boolean.were_outside_night
  235.             icon: mdi:weather-night
  236.             name: Were Outside Night
  237.             tap_action:
  238.               action: call-service
  239.               service: script.toggle_were_outside
  240.             styles:
  241.               card:
  242.                 - background-color: rgba(67, 73, 82, 1) !important
  243.                 - border-radius: 10px !important
  244.                 - box-shadow: >
  245.                    12px 12px 24px rgba(0, 0, 0, 0.5), -4px -4px 8px rgba(255,
  246.                     255, 255, 0.1), inset -4px -4px 8px rgba(0, 0, 0, 0.2),
  247.                     inset 4px 4px 8px rgba(255, 255, 255, 0.2) !important
  248.                 - padding: 12px
  249.                 - overflow: hidden
  250.                 - position: relative
  251.                 - font-weight: 400
  252.                 - height: 98px
  253.               name:
  254.                 - font-size: 16px
  255.                 - color: rgba(241, 241, 241, 0.9) !important
  256.               icon:
  257.                 - height: 50px
  258.             state:
  259.               - value: "on"
  260.                 styles:
  261.                   icon:
  262.                     - color: rgba(255, 0, 0, 0.7) !important
  263.                     - height: 50px
  264.               - value: "off"
  265.                 styles:
  266.                   icon:
  267.                     - color: rgba(241,241,241,0.8)
  268.                     - height: 50px
  269.           - type: markdown
  270.             content: " "
  271.             card_mod:
  272.               style: |
  273.                ha-card {
  274.                   background: transparent;
  275.                   box-shadow: none;
  276.                   height: 50px;
  277.                   border-radius: 12px;
  278.                 }
  279.                 .markdown {
  280.                   padding: 0;
  281.                 }
  282.           - type: markdown
  283.             content: " "
  284.             card_mod:
  285.               style: |
  286.                ha-card {
  287.                   background: transparent;
  288.                   box-shadow: none;
  289.                   height: 50px;
  290.                   border-radius: 12px;
  291.                 }
  292.                 .markdown {
  293.                   padding: 0;
  294.                 }
  295.   - type: grid
  296.     columns: 1
  297.     square: false
  298.     cards:
  299.       - type: horizontal-stack
  300.         cards:
  301.           - type: custom:bubble-card
  302.             card_type: separator
  303.             name: ""
  304.             icon: ""
  305.             card_layout: normal
  306.             styles: |
  307.              :host {
  308.                 display: block !important;
  309.                 margin: -18px 10px 16px 0 !important;
  310.                 border-radius: 1px
  311.               }
  312.               .bubble-line {
  313.                 background-color: #00adb5 !important;
  314.                 height: 6px !important;
  315.                 opacity: 1 !important;
  316.                 margin: 0 !important;
  317.               }
  318.               .bubble-card-content {
  319.                 padding: 0 !important;
  320.                 margin: 0 !important;
  321.               }
  322.               ha-card {
  323.                 background: none !important;
  324.                 box-shadow: none !important;
  325.                 margin: 0 !important;
  326.                 padding: 0 !important;
  327.                 height: 6px !important;
  328.               }
Tags: custom buttons scenes.
Advertisement
Comments
  • User was banned
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!