To leave a reference option for future users: I use the mushroom cover card and card_mod to arrange the buttons vertically.
Here is my code,The code defines the size, position, icon size, and buttons-control for the buttons.:
card_mod:
style:
mushroom-cover-buttons-control$:
mushroom-button:nth-child(1)$: |
.button {
--control-icon-size: 50px;
margin-top: 5px !important;
margin-left: 10px !important;
height: 55px !important;
width: 55px !important;
}
mushroom-button:nth-child(2)$: |
.button {
--control-icon-size: 52px;
margin-top: 70px !important;
margin-left: -20px !important;
height: 55px !important;
width: 55px !important;
}
mushroom-button:nth-child(3)$: |
.button {
--control-icon-size: 50px;
margin-top: 130px !important;
margin-left: -51px !important;
height: 55px !important;
width: 55px !important;
}
.: |
mushroom-cover-buttons-control {
height: 180px !important;
}
https://community.home-assistant.io/t/mushroom-cards-card-mod-styling-config-guide/600472
https://github.com/thomasloven/lovelace-card-mod
https://github.com/piitaya/lovelace-mushroom