Make sci-fi-like buttons with Kivy

Completed

I made it with Kivy thinking that I could make a SF-like button without using images. As a result, a button like this was created.

That's why I made it

The policy is simple and is achieved by creating two frames on the button canvas. If you run main.py and test.kv in the same hierarchy, it will look like the first image.

main.py

from kivy.app import App
from kivy.factory import Factory

class TestApp(App):
    def __init__(self, **kwargs):
        super(TestApp, self).__init__(**kwargs)
        
    def build(self):
        self.root = root = Factory.FloatLayout()

        btn = Factory.SFButton(
            text="This is SF !",
            size_hint=(0.5, 0.2),
            pos_hint={'x':0.25, 'y':0.4},
            on_release=self.btn_pushed
        )
        root.add_widget(btn)
        
        return root
    
    def btn_pushed(self, instance, *args):
        print(f"{instance.text} pushed !")


def main():
    TestApp().run()

if __name__ == '__main__':
    main()

test.kv

#: import hex kivy.utils.get_color_from_hex

<SFButton@Button>:
    background_color: hex('#44acac')
    canvas.before:
        Color:
            rgba: hex('#26c7e5')
        Line:
            width: 2
            rectangle: self.x, self.y, self.width, self.height

        Color:
            rgba: hex('#26c7e5')
        Line:
            width: 1
            rectangle: self.x-4, self.y-4, self.width+8, self.height+8

point

In canvas.before, you can draw a picture by specifying the color → specifying the figure continuously. Using that, the rectangle is drawn in the order of inside → outside. When you draw the outer line here, just like the inner line

rectangle: self.x, self.y, self.width, self.height

If you do ... And like this, only the inner line can be seen. (Why isn't it overwritten by the outer line ??) Therefore, on the outer line

rectangle: self.x-4, self.y-4, self.width+8, self.height+8

I adjusted it so that it becomes a slightly larger rectangle. I think this side will change again with the width of the outer line. By the way

rectangle: self.x-3, self.y-3, self.width+6, self.height+6

In the case of have become. I tried various other things, but personally I like the adjustment of test.kv which is the image at the beginning.

I think it is easier to see the color specification in hexadecimal, so I use the kivy.utils.get_color_from_hex function.

Finally

I think I was able to get a good feeling without the image. In the end, I want to operate with a SF-like design even when pressed,