Touch Glow Example with css and jQuery, Enjoy

问题:

Just came up with this simple approach today after seeing a few other people use this cool glow effect in a couple different iOS Apps. I've had so much help from people in this community I thought I could give back a little. Enjoy!

Here is some simple CSS for the glow effect (white in this case). Of course depending on your button width and height you may have to adjust the top and bottom %'s.

.glow-hover-effect {
    display:none;
    background: #B4B2B2;
    height:1px;
    width:2px;
    margin:0 auto;
    z-index:500;
    position:absolute;
    top: 15%;
    left: 47%;
    -webkit-border-radius: 5em;
    -webkit-box-shadow: 0px 0px 45px 30px rgba(255, 253, 253, 0.75); 
}
.ftk50 {
    position:relative;
    z-index:100;
}

And here is the jQuery that plays out when you tap on a device. I would be interested in seeing a shorter method for this too?

$('.ftk50').bind('touchstart', function() {
      $('.glow-hover-effect').fadeIn();
 });

$('.ftk50').bind('touchend', function() {
      $('.glow-hover-effect').fadeOut();
 });

Example HTML

<div class="ftk50"> 
   <div class="glow-hover-effect"></div> 
   <input type="button" value="Buy Now" data-ajax="false"/>
</div>

BAM now your stylin' with a glow effect on your button. Courtesy http://www.slickremix.com Anybody have any other solutions?