[](https://travis-ci.org/Bryan Antigua/BAShimmerButton)

Note:GIF QUALITY MAKES THE SHIMMER LESS SMOOTH (run the code for best display)

A call-to-action button that offers shimmer, movement, and off/on functionality. Great for getting a users attention in multiple ways!

• Works on any iOS device

To run the example project, clone the repo, and run pod install from the Example directory first.

BAShimmerButton is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "BAShimmerButton"

To add a BAShimmerButton to your app, add the line:

BAShimmerButton *button = [[BAShimmerButton alloc] initWithFrame:self.view.frame];
[self addCircularMask:button];
[button showButtonWithAnimation:@YES];//@NO skips the animation

Note: circular mask added beforehand Note: You can skip the first line, if you added the button in IB

This creates the following animation/button:

Listed below are examples of several properties that you can control.

You can use initWithFrame: or simply adding the view in Interface Builder to use this button.

####showButtonWithAnimation:(bool)animated Calling this method shows the button, by passing in @NO, you will simply show the button. If you pass @YES, you'll see the following animation (same code in the basic section):

####hideButtonWithAnimation:(bool)animated Similar to the one above, but the reverse:

####toggleButton This will transiton the button from the on to off state, or vice versa. The IB action can be done like the example below:

- (IBAction)buttonPressed:(id)sender {
    BAShimmerButton *button = (BAShimmerButton*)sender;
    [button toggleButton];
}

You can then produce the following:

####wiggleButton To draw attention to your button, try this method:

BAShimmerButton *button = [[BAShimmerButton alloc] initWithFrame:self.view.frame];
[self addCircularMask:button];
[button showButtonWithAnimation:@NO];
[button wiggleButton];

which results in the following:

An icon image can be set for the button with the iconImage property. This also results in a mask of the image for the off state (color of your choosing).

BAShimmerButton *button = [[BAShimmerButton alloc] initWithFrame:self.view.frame];
[self addCircularMask:button];
button.backgroundColor = [UIColor colorWithHex:0x420013];
button.shimmerColor = [UIColor colorWithHex:0xe33550];
button.iconImage = [UIImage imageNamed:@"icon"];
[button showButtonWithAnimation:@NO];//@NO skips the animation

This creates this button:

For the off state of the icon above, you can set different off colors:

BAShimmerButton *button = [[BAShimmerButton alloc] initWithFrame:self.view.frame];
button.gradientSize = 0.3f;
button.backgroundColor = [UIColor colorWithHex:0x420013];
button.shimmerColor = [UIColor colorWithHex:0xe33550];
button.iconOffImageColor = [UIColor colorWithHex:0xfffffff];
button.iconImage = [UIImage imageNamed:@"icon"];
[button showButtonWithAnimation:@NO];

Note: Set before you set iconImage This creates the following view:

If you want the shimmering to last longer/shorter, you can edit the shimmerDuration property:

BAShimmerButton *button = [[BAShimmerButton alloc] initWithFrame:self.view.frame];
button.shimmerDuration = 1.0f;
[button showButtonWithAnimation:@NO];

This results in the following:

You can also change the overall color of the shimmer by editing the shimmerColor property:

BAShimmerButton *button = [[BAShimmerButton alloc] initWithFrame:self.view.frame];
[self addRoundedSquareMask:button];
button.backgroundColor = [UIColor colorWithHex:0x22313F];
button.shimmerColor = [UIColor colorWithHex:0x3498db];
[button showButtonWithAnimation:@NO];

This creates the following effect:

By default, the animation goes from left to right in a diagonal direction. You can change the direction by setting the shimmerDirection property with any of the following:

• BAShimmerDirectionTopToBottom
• BAShimmerDirectionBottomToTop
• BAShimmerDirectionLeftToRight
• BAShimmerDirectionDiagonalLeftToRight
• BAShimmerDirectionRightToLeft
• BAShimmerDirectionDiagonalRightToLeft

Setting a new direction can be done like so:

BAShimmerButton *button = [[BAShimmerButton alloc] initWithFrame:self.view.frame];
button.shimmerDuration = BAShimmerDirectionTopToBottom;
[button showButtonWithAnimation:@NO];

This creates the following view:

the gradient size can be adjust with the gradientSize property. This value is betwee 0 and 1 and determines how wide the entire shimmer should be:

BAShimmerButton *button = [[BAShimmerButton alloc] initWithFrame:self.view.frame];
button.gradientSize = 0.3f;
[button showButtonWithAnimation:@NO];

This creates the following button:

Bryan Antigua, [email protected] - bryanantigua.com

BAShimmerButton is available under the MIT license. See the LICENSE file for more info.