CSS3: Animated button using transition on mouse hover

This entry is part 5 of 13 in the series CSS3

Here we show a transition of a link button changing its color from gray to black.

The color that we want to transition to is on the :hover.

Without setting the transition effect, it will change to black immediately.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>CSS Transistions</title>
    <style>
        a {
            background: gray;
            border-radius: 5px;
            display: block;
            float: left;
            padding: 5px;
            text-align: center;
            width: 125px;
            -webkit-transition: all 1s ease-in;
            -moz-transition: all 1s ease-in;
            -o-transition: all 1s ease-in;
            transition: all 1s ease-in;
        }

        a:hover {
            background: black;
            color: white;
        }
    </style>
</head>
<body>

<a href='//yahoo.com'>Link to Yahoo</a>

</body>
</html>

The key piece of CSS is transition: all 1s ease-in.  With this line, the browser will animate all the properties (background and color) to use the ease-in timing function.

The total time of transition is 1 second.

jQuery Mobile: Popup transitions

This entry is part 65 of 73 in the series jQuery Mobile

Generally, we want the popup to be fast and simple.  But if you are keen, you can add some transition effects such as slide and fade to the popup.

To set the transition used for a popup, add the data-transition attribute to the link that references the popup.

The reverse transition will be used when closing the popup.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>Welcome To My Popup Transition App</h1>
    </div>

    <div data-role='content' style='text-align: center'>
        <a href='#transitionExample' data-transition='none' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>No transition</a>
        <a href='#transitionExample' data-transition='pop' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>Pop</a>
        <a href='#transitionExample' data-transition='fade' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>Fade</a>
        <a href='#transitionExample' data-transition='flip' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>Flip</a>
        <a href='#transitionExample' data-transition='turn' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>Turn</a>
        <a href='#transitionExample' data-transition='flow' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>Flow</a>
        <a href='#transitionExample' data-transition='slide' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>Slide</a>
        <a href='#transitionExample' data-transition='slidefade' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>Slidefade</a>
        <a href='#transitionExample' data-transition='slideup' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>Slide up</a>
        <a href='#transitionExample' data-transition='slidedown' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>Slide down</a>
        <div data-role='popup' id='transitionExample' class='ui-content' data-theme='a'>
            <p>I'm a simple popup.</p>
        </div>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code