How do I style a button to have transparent text?

I am currently working on a welcome page and I came across this interesting design:

credit to Julian Bialowan for the design: https://dribbble.com/shots/1807682-Everest-Welcome

  • Detecting when app is becoming active from lockscreen vs other on iOS7
  • Closure cannot implicitly capture a mutating self parameter
  • How to redraw my view in SWIFT?
  • How to fade a UIVisualEffectView and/or UIBlurEffect in and out?
  • UILabel sizeToFit method not working properly
  • Using custom fonts in interface builder
  • I’m trying to make a button at the bottom with text that goes through the semi-transparent view behind it. I tried out the following code but it doesn’t seem to be working:

    let transparent = UIColor(red: 0, green: 0, blue: 0, alpha: 0)
    let semiwhite = UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 0.15)        
    bottomView.backgroundColor = semiwhite
    loginButton.backgroundColor = semiwhite
    loginButton.setTitleColor(transparent, forState: .Normal)
    loginButton.layer.cornerRadius = 10
    loginButton.layer.masksToBounds = true
    loginButton.layer.borderWidth = 2.5
    loginButton.layer.borderColor = transparent.CGColor
    

    Does anyone know how to do this?

    3 Solutions Collect From Internet About “How do I style a button to have transparent text?”

    I’d suggest that you don’t want “transparent” text. Instead, you may want to think of this as a white view with a “mask” which is the outline of the text, allowing the image underneath to be revealed. This is complicated a bit because the mask is actually inverted from how we generally mask images (e.g., the “Sign in with Facebook” text is not the mask, but rather the white space around it is). But Core Graphics offer ways to do this very easily.

    So, while it’s probably easiest to create this graphic in your favorite image editing tool, if you wanted to do it programmatically, you could do something like:

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
    
        updateMaskForView(button1, text: "Sign in with Facebook")
        updateMaskForView(button2, text: "Sign-up with Email")
    }
    
    func updateMaskForView(button: UIImageView, text: String) {
        UIGraphicsBeginImageContextWithOptions(button.bounds.size, true, 0)
        let context = UIGraphicsGetCurrentContext()
    
        CGContextScaleCTM(context, 1, -1);
        CGContextTranslateCTM(context, 0, -button.bounds.size.height);
    
        // draw rounded rectange inset of the button's entire dimensions
    
        UIColor.whiteColor().setStroke()
        let rect = CGRectInset(button.bounds, 10, 10)
        let path = UIBezierPath(roundedRect: rect, cornerRadius: 5)
        path.lineWidth = 4
        path.stroke()
    
        // draw the text
    
        let attributes = [
            NSFontAttributeName: UIFont.preferredFontForTextStyle(UIFontTextStyleCaption1),
            NSForegroundColorAttributeName: UIColor.whiteColor()
        ]
        let size = text.sizeWithAttributes(attributes)
        let point = CGPoint(x: (button.bounds.size.width - size.width) / 2.0, y: (button.bounds.size.height - size.height) / 2.0)
        text.drawAtPoint(point, withAttributes: attributes)
    
        // capture the image and end context
    
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
    
        // create image mask
    
        let cgimage = image.CGImage!
        let bytesPerRow = CGImageGetBytesPerRow(cgimage)
        let dataProvider = CGImageGetDataProvider(cgimage)
        let bitsPerPixel = CGImageGetBitsPerPixel(cgimage)
        let width = CGImageGetWidth(cgimage)
        let height = CGImageGetHeight(cgimage)
        let bitsPerComponent = CGImageGetBitsPerComponent(cgimage)
        let mask = CGImageMaskCreate(width, height, bitsPerComponent, bitsPerPixel, bytesPerRow, dataProvider, nil, false)
    
        // create background
    
        UIGraphicsBeginImageContextWithOptions(button.bounds.size, false, 0)
        CGContextClipToMask(UIGraphicsGetCurrentContext(), button.bounds, mask)
        UIColor.whiteColor().colorWithAlphaComponent(0.9).setFill()
        UIBezierPath(rect: button.bounds).fill()
        let background = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
    
        // use image
    
        button.image = background
    }
    

    enter image description here

    The technique to pay attention to here is the use of CGImageMaskCreate, which lets us mask out everything except the white text and border that we drew. Generally, when we talk about masking images, we’re masking them with other images (where a non-zero alpha channel reveals what should be masked and what shouldn’t), but we’re masking using an Core Graphics “image mask”, which gives us more control. For a discussion on the differences between masking with an image mask and masking with an image, see the Masking Images chapter of the Quartz 2D Programming Guide.

    I would design the button in something like Adobe Fireworks, leaving the text transparent and then save it as a GIF.
    You can then set it as the background to your button.

    First thing you can set tintcolor as your desired color.

    and if you are setting alpha to 0 then that means view is being hidden. so don’t give alpha to 0.

    You have option like, you can use clear color. so background color will show.

    second thing if you want to use color then take white color with alpha 0.5 or other color with alpha 0.5 or 0.2 likewise don’t take exact 0. it will make view invisible.

    This was fundamental part. Now in your case you can do something like this,

    for example your button size is 30 x 100 than you should take uiview as background with greater size of that button and set clear color as background color and add button on that view so border color or textcolor will automatically set like wise if you give clear color as tint or border.

    another easy option is you can take image exactly matching with requirement and take imageview and set background to clear color and image as your image and add button on that image inplace off button with clear color and no text because text covers in image itself

    hope this will help 🙂