CSS3 transition effect to multiple property Examples

First Page
<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 transition effect to multiple property Examples</title>
      <style type="text/css">
         button {
            color: #ccc;
            padding: 10px 20px;
            font: bold 18px sans-serif;
            background: blue;
            border: 3px solid #dc5801;
            -webkit-transition-property: background, border;
            -webkit-transition-duration: 1s, 2s;
            transition-property: background, border;
            transition-duration: 1s, 2s;
         }
         button:hover {
            background: #3cc16e;
            border-color: #288049;
         }
      </style>
   </head>
   <body>
      <button type="button">Hover on me</button>
   </body>
</html>
Output

First Page