Craft that perfect SwiftUI button effect ๐Ÿ‘Œ๐Ÿผ

Overview

buttoncraft (SwiftUI 2.0 App)

Experimenting with SwiftUI 2.0 whilst creating a practical app to craft that perfect button style.

โœˆ๏ธ Testflight

https://testflight.apple.com/join/pZDhygQt

๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป Code outputted from app

struct MyButtonStyle: ButtonStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .background(Capsule()
                            .foregroundColor(configuration.isPressed ? Color.primary.opacity(0.75) : Color.primary))
            .scaleEffect(configuration.isPressed ? CGFloat(0.85) : 1.0)
            .rotationEffect(.degrees(configuration.isPressed ? 0.0 : 0))
            .blur(radius: configuration.isPressed ? CGFloat(0.0) : 0)
            .animation(Animation.spring(response: 0.35, dampingFraction: 0.35, blendDuration: 1))
    }
}

extension Button {
    func myButtonStyle() -> some View {
        self.buttonStyle(MyButtonStyle())
    }
}

// to use
Button(action: { }) {
    Text("just like that")
        .font(Font.body.bold())
        .padding()
        .foregroundColor(Color.primary)
        .colorInvert()
}
.myButtonStyle()

Button(action: { }) {
    Image(systemName: "face.smiling")
        .font(Font.body.bold())
        .imageScale(.large)
        .padding()
        .foregroundColor(Color.primary)
        .colorInvert()
}
.myButtonStyle()

๐Ÿง Features

  • ๐Ÿ”€ Randomise different settings for inspiration
  • Reset to my default style
  • Using the new iOS ColorPicker
  • Copy your perfect masterpiece as a code snippet to your clipboard

๐Ÿ‘จ๐Ÿปโ€โš–๏ธ Disclaimer

This is posted as a way to share SwiftUI learnings (and is not production level code). Use it at your own risk.

You might also like...
Best architecture for SwiftUI + CombineBest architecture for SwiftUI + Combine

Best architecture for SwiftUI + Combine The content of the presentation: First of the proposed architectures - MVP + C Second of the proposed architec

Weather-swiftui - An example of using SwiftUI

weather-swiftui An example of using SwiftUI Installation Get openweather api key

Orbit-swiftui - Orbit design system implemented in SwiftUI for iOS

Orbit is a SwiftUI component library which provides developers the easiest possi

SwiftUI Resume - A simple resume writed by swiftUI + Combine
SwiftUI Resume - A simple resume writed by swiftUI + Combine

SwiftUI_Resume a simple "resume" writed by swiftUI + Combine

SwiftUI-MSALSample - Sample project to login with MSAL using SwiftUI
SwiftUI-MSALSample - Sample project to login with MSAL using SwiftUI

SwiftUI-MSALSample I could not find a good walkthrough on how to implement MSAL

100-Days-of-SwiftUI - Studying through Paul Hudson's 100 Days of SwiftUI
100-Days-of-SwiftUI - Studying through Paul Hudson's 100 Days of SwiftUI

Hacking with SwiftUI 100 Days of SwiftUI Studying through Paul Hudson's "100 Day

Watchos-navlink-swiftui-bug - Example Project to demonstrate bug in SwiftUI when NavigationLink is activated inside a TabView SwiftUI-Card - Simple card ui designed using SwiftUI
SwiftUI-Card - Simple card ui designed using SwiftUI

SwiftUI - Card Simple card ui designed using SwiftUI Preview

Swiftui-pressed-states-example - Examples of Pressed States in SwiftUI

Examples of Pressed States in SwiftUI pressed-states.mp4

Owner
An Trinh
iOS Developer
An Trinh
Thomas Grapperon 32 Dec 12, 2022
MatchedGeometryEffect - SwiftUI MatchedGeometry effect demo

SwiftUI MatchedGeometryEffect This is a demo project to experiment and learn the

Andras Samu 2 Oct 12, 2022
Animated shine effect for your views

Shine-View-SwiftUI Animated shine effect for your views @State var animateTrigger = false var body: some View { Button(action: { animate

ะะปะตะบัะตะน 9 Sep 14, 2022
A SwiftUI wrapper around the `Add to Siri` button used to donate INIntents to the system.

AddToSiri A SwiftUI wrapper around the Add to Siri button used to donate INIntents to the system. Originally created by Reddit user u/dippnerd (Github

Florian Schweizer 5 Nov 23, 2022
In app "App Update" button library in swift

What is Upstream? It gives you a magic button, because this button will only appear when there is an app update available on appstore for given app. P

Mohammad Yasir 6 Jun 22, 2022
๐ŸŽฒ 100% SwiftUI 2.0, classic 2048 game [SwiftUI 2.0, iOS 14.0+, iPadOS 14.0+, macOS 11.0+, Swift 5.3].

swiftui-2048 If you like the project, please give it a star โญ It will show the creator your appreciation and help others to discover the repo. โœ๏ธ Abou

Astemir Eleev 174 Dec 17, 2022
A simple SwiftUI Application to demonstrate creation of UI using SwiftUI.

WatchShop_UI A simple SwiftUI Application to demonstrate creation of UI using SwiftUI. How to run the project ? Fork the project. Run the project usin

Shubham Kr. Singh 12 Apr 15, 2022
E-commerce app built in SwiftUI. Built in the course SwiftUI Masterclass in Udemy.

Touchdown-SwiftUI E-commerce app built in SwiftUI. Built in the course SwiftUI Masterclass in Udemy. Main components and concepts used: @EnvironmentOb

Jorge Martinez 5 Aug 18, 2022
A multiplatform SwiftUI project demonstrating various SwiftUI features.

WikiDemo A multiplatform SwiftUI project demonstrating various SwiftUI features, including creating a master-detail interface. It's a multiplatform ve

Swift Dev Journal 6 Oct 17, 2022
SwiftUI Projects from Udemy SwiftUI Masterclass

SwiftUI Masterclass Repos: AsyncImage (N/A) Fructus (finished): an app for getting information about different fruits. Data comes from json files. Afr

Patrick Spafford 1 Mar 3, 2022