SwiftUI Tutorial – How to create a Circle Button using Neumorphic Design.

Welcome to a new SwiftUI tutorial. We are going to be talking about Shapes in SwiftUI and how we can use this in a Neumorphic Design.

Let’s get started 👍

Let’s open up Xcode and start a new project.

Then call the project CircleButton_Neumorphic_SwiftUI or whatever you want, then save the project.

Now we are setup this is what the ContentView looks like.

First, we are going to open up the Assets.xcassets folder. We are going to add in a New Color Set.

Select the new Color and in the Attributes inspector we are looking for the option Appearances. We are going to set this to Any, Dark.

This is going to be our background color for the app. So change the name of the color to Background.

Background Hex:

Any Appearance HEX: #DEEAF6

Dark Appearance HEX: #1A1B1E

Now do that again for two New Color Set’s and call them DarkShadow, LightShadow.

DarkShadow Hex:

Any Appearance HEX: #BECBD8

Dark Appearance HEX: #151518

LightShadow Hex:

Any Appearance HEX: #F3F9FF

Dark Appearance HEX: #242529

Now we have our colors set up we are ready to go! 👌 We are going back into the ContentView and start creating our View.

We are going to use ZStack and inside we are going to create a Rectangle, this is going to be the background.

We have also created a new Struct called circleButton this is where we are going to be writing the code for the button.

We are going to create two @State var’s called circleTapped and circlePressed. Then we are going to create a ZStack.

Here we are going to be creating an Image for our button this image is going to be used from the SF Symbols app.

Now that is done, we are now going to give the button a background.

We are going to give the button a scaleEffect, we are also going to be using the TapGesture because without this our Circle Button does not do anything when it is tapped on.

Awesome our Circle Button looks dope! 👌 Now let’s take a look at our button in DarkMode!?

Conclusion 👏

Awesome, we have now finished this tutorial on how to create a Circle Button using Neumorphic Design. We have learnt how to create new color set’s, use ZStack and how to create a Circle shape and much more. With this knowledge you should be able to create some dope designs in neumorphic.

If you would like the whole source code of this tutorial GitHub

I hope you have enjoyed this tutorial! If you want to learn more about SwiftUI and Neumorphic Design, check out our YouTube channel for other awesome SwiftUI tutorials. Also make sure to keep yourself up to date with our upcoming tutorials on Instagram

Thank you all for reading this content.