Remove Button Once Another Button Is Pressed App Designer Matlab

In this post I am going to cover everything you need to know to make your own custom buttons in SwiftUI. In this post I will cover a range of custom design buttons such as, Gradient and Neumorphic and many more. We will going to be applying effects while they are clicked. All in a clean and reusable way.

Default `buttonStyle()`

buttonStyle() is a modifier which set a custom style of a button. SwiftUI 2.0 comes with predefined options. such as PlainButtonStyle(), BorderlessButtonStyle(), DefaultButtonStyle().

                                  struct ContentView: View {     var body: some View {         VStack(spacing: 10) {             Button("Plain", action: {             }).buttonStyle(PlainButtonStyle())             Button("Borderless", action: {             }).buttonStyle(BorderlessButtonStyle())             Button("Default", action: {             }).buttonStyle(DefaultButtonStyle())         }     } }

Plain Button

I shall start with a the default button to give an example. By clicking the only effect we see if a slight fadeout when is being pressed. I have created a simple toggle button using @State and I will be using it for a show case to demonstrate the customs buttons I have created.

                struct ContentView: View {     @State var favourite = false     var body: some View {         ZStack {             Color.white             Button(action: {                 self.favourite.toggle()             }) {                 HStack {                     Image(systemName: favourite ? "star.fill" : "star")                         .foregroundColor(favourite ? Color.yellow : Color.gray )                     Text("Favourite")                 }             }             .padding()         }.ignoresSafeArea()     } }

Gradient Button Style

For the next button I will have to extend a protocol named ButtonStyle. SwiftUI allows us to create custom buttons through a modifier, that way the style is reusable. The next button I am going to show you, is the gradient style button, using LinearGradient. First we will have to create the extension. where we can apply anything we the button to have like Shadow, cornerRadius, color.

                struct GradientBackgroundStyle: ButtonStyle {       var startColor: Color     var endColor: Color          func makeBody(configuration: Self.Configuration) -> some View {         configuration.label             .frame(maxWidth: .infinity)             .padding()             .foregroundColor(.white)             .background(LinearGradient(gradient: Gradient(colors: [startColor, endColor]), startPoint: .leading, endPoint: .trailing).opacity(configuration.isPressed ? 0.5 : 1))             .cornerRadius(40)             .padding(.horizontal, 20)             .shadow(radius: 10)     } }

Self.Configuration the instance of the button, on which we can see amongst many when the button is being pressed. It takes two arguments, which are the colors of the gradient, you can play more with it if you want. Now that out extension is ready I will go ahead and apply It to my default button, which in fact the only line of code I will add is to pass the GradientBackgroundStyle in the buttonStyle() modifier.

                struct ContentView: View {     @State var favourite = false     var body: some View {         ZStack {             Color.white             Button(action: {                 self.favourite.toggle()             }) {                 HStack {                     Image(systemName: favourite ? "star.fill" : "star")                         .foregroundColor(favourite ? Color.yellow : Color.gray)                     Text("Favourite")                         .foregroundColor(Color.black)                 }             }             .buttonStyle(GradientBackgroundStyle(startColor: Color.pink, endColor: Color.purple))             .padding()         }.ignoresSafeArea()     } }

Outlined Rounded Corners

Create the button style to respond to a design of the equivalent button we want to make, which this time is an outlined button with corners corners.

                struct RoundedCorners: ButtonStyle {       var color: Color          func makeBody(configuration: Self.Configuration) -> some View {         configuration.label             .frame(maxWidth: .infinity)             .background(Color.white)             .padding(10)             .overlay(                    RoundedRectangle(cornerRadius: 10)                        .stroke(color, lineWidth: 1)                )         } }

Let's apply this style to the View we created.

                .buttonStyle(RoundedCorners(color: Color.black))

The View will look like this

                struct ContentView: View {     @State var favourite = false     var body: some View {         ZStack {             Color.white             Button(action: {                 self.favourite.toggle()             }) {                 HStack {                     Image(systemName: favourite ? "star.fill" : "star")                         .foregroundColor(favourite ? Color.yellow : Color.gray)                     Text("Favourite")                         .foregroundColor(Color.black)                 }             }             .buttonStyle(RoundedCorners(color: Color.black))             .padding()         }.ignoresSafeArea()     } }

Outlined border

The next button has a scaleEffect which is being activated when is being pressed. The ButtonStyle protocol allow us to identify when the button is being pressed by passing the button's instance.

                .scaleEffect(configuration.isPressed ? 0.9 : 1.0)

scale effect takes a Float, in this example is going to scale out our button and make is smaller when is being clicked.

                struct OutlineBorder: ButtonStyle {       var color: Color          func makeBody(configuration: Self.Configuration) -> some View {         configuration.label             .frame(maxWidth: .infinity)             .padding(.horizontal, 20)             .padding(10)             .background(configuration.isPressed ? color.opacity(0.5) : color)             .foregroundColor(.white)             .padding(2)             .border(color, width: 1)             .shadow(radius: 10)             .scaleEffect(configuration.isPressed ? 0.99 : 1.0)     } }

Now add the style in our button.

                .buttonStyle(OutlineBorder(color: Color.black))

I will look something like this

                struct ContentView: View {     @State var favourite = false     var body: some View {         ZStack {             Color.white             Button(action: {                 self.favourite.toggle()             }) {                 HStack {                     Image(systemName: favourite ? "star.fill" : "star")                         .foregroundColor(favourite ? Color.yellow : Color.gray)                     Text("Favourite")                 }             }             .buttonStyle(OutlineBorder(color: Color.black))             .padding()         }.ignoresSafeArea()     } }

Outline square button

The next button is a simple square button which I see very often lately on applications on App Store. is a simple outlined square button, which I am going to create give it a slight scale effect this time.

                struct OutlineButton: ButtonStyle {          var color: Color     func makeBody(configuration: Self.Configuration) -> some View {         configuration.label             .frame(maxWidth: .infinity)             .padding(.horizontal, 20)             .padding(10)             .border(color, width: 1)             .foregroundColor(.white)             .padding(2)             .shadow(radius: 10)             .scaleEffect(configuration.isPressed ? 0.99 : 1.0)              } }

Let's add the style in the default button we created.

                struct ContentView: View {     @State var favourite = false     var body: some View {         ZStack {             Color.white             Button(action: {                 self.favourite.toggle()             }) {                 HStack {                     Image(systemName: favourite ? "star.fill" : "star")                         .foregroundColor(favourite ? Color.yellow : Color.gray)                     Text("Favourite")                         .foregroundColor(Color.black)                 }             }             .buttonStyle(OutlineButton(color: Color.black))             .padding()         }.ignoresSafeArea()     } }

It will look like this.

Neumorphic style Button

This is more demanding design, as I have to create my own colors to support a neumorphic design. First step is to create the background color and the two shadow colors, as I will have to create two layers of shadows to give that neumorphic look.

                extension Color {     static let lightShadow = Color(red: 255 / 255, green: 255 / 255, blue: 255 / 255)     static let darkShadow = Color(red: 163 / 255, green: 177 / 255, blue: 198 / 255)     static let background = Color(red: 224 / 255, green: 229 / 255, blue: 236 / 255) }

                struct neumorphic: ButtonStyle {     var color: Color          func makeBody(configuration: Self.Configuration) -> some View {         configuration.label             .padding(.horizontal,20)             .padding(10)             .background(Color.background)             .cornerRadius(5)             .shadow(color: Color.darkShadow, radius: 3, x: 2, y: 2)             .shadow(color: Color.lightShadow, radius: 3, x: -2, y: -2)             .scaleEffect(configuration.isPressed ? 0.9 : 1.0)     } }

Now let's apply everything to the default button. This will work like a charm!!

                struct ContentView: View {     @State var favourite = false     var body: some View {         ZStack {             Color.background             Button(action: {                 self.favourite.toggle()             }) {                 HStack {                     Image(systemName: favourite ? "star.fill" : "star")                         .foregroundColor(favourite ? Color.yellow : Color.gray)                     Text("Favourite")                         .foregroundColor(Color.black)                 }             }             .buttonStyle(neumorphic(color: Color.background))             .padding()         }.ignoresSafeArea()     } }

You can Find the code on my GitHub.

Add me on my socials and feel free to support me on Patreon.

Subscribe on my website to get notified for new content

Become a Patron!