Below is my code : This code gives shadow to all part of button. I only want to give shadow to bottom part of button
Button should look like something like this :
var body: some View {
Button(action: {
self.action(self.title)
self.hover.toggle()
}) {
if title == "x" {
ZStack {
Image(systemName: "delete.left").cornerRadius(5).font(Font.system(size: 28, weight: .medium))
.background(Color..secondaryBG)
.accentColor(.accentTint)
}
} else {
Text(title).customText(titleColor: .accentTint, fontName: .gothamMedium, fontSize: 28)
.background(Color.secondaryBG)
}
}
.withBackground(color: .accentTint)
.frame(width: 76, height: 76)
.cornerRadius(5)
.shadow(color: .numberPadShadowColor, radius: 5, x: 0, y: 1) // This gives shadow to all the parts. I do not want to give shadow to top part of button
}
What you show is more like a drop shadow with hard edges:
give it a solid background and shift it down:
struct ContentView: View {
var body: some View {
Button(action: {
//
}) {
Image(systemName: "delete.left")
.font(Font.system(size: 28, weight: .medium))
.foregroundColor(.black)
}
.frame(width: 76, height: 76)
.background(Color(uiColor: .lightGray))
.cornerRadius(5)
.background(
RoundedRectangle(cornerRadius: 5)
.offset(x: 0, y: 1)
)
}
}