Nativescript: Creating a Button with no border or shadow

[erjdriver]

I've got a NS app (w/o Angular) and trying to create a Button with no border or shadow - basically transparent.

I created a project tns create myApp --template tsc and then modified the "tap" button with css class definitions of

"btn btn-active"
"btn btn-primary btn-active"
"" (no class)

But can't get the border and shadow to disappear.

This is using the latest NS software + Android + Android emulator (dev on Windows 10).

[tsonevn]

Hi @erjdriver,
To remove the shadow of the button on Android you should set some borderWidth and to setup borderColor to transparent for the component as it has been shown in the example below:

XML

<StackLayout class="p-20">
        <Label text="Tap the button" class="h1 text-center"/>
        <Button text="TAP" tap="{{ onTap }}" class="btn btn-active"/>
        <Label text="{{ message }}" class="h2 text-center" textWrap="true"/>
    </StackLayout>

CSS

.btn{
    border-color: transparent;
    border-width: 1;
}

[erjdriver]

Genius!

case closed.

[Jaishankarb]

Still, the native touch effect gets lost on android

[proximilis]

.btn:active {
background-color: [your-color] ;
}
something like that ?

[AresDev]

I've used :

.mybutton-class{
border-color: [same as background];
z-index: 0; to remove de shadow.
}

[surdu]

@tsonevn Without border-width: 1; it doesn't work... That makes no sense ...

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.