| 123456789101112131415161718192021222324252627282930313233343536373839404142 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Button transition</title>
- <style>
- button {
- cursor: pointer;
- border: 0;
- padding: .5em 1em;
- color: #fff;
- border-radius: .25em;
- outline: none;
- font-size: 1em;
- background-color: #173b6d;
- background-image: -webkit-linear-gradient(top, #1a4a8e, #173b6d);
- background-image: linear-gradient(to bottom, #1a4a8e, #173b6d);
- box-shadow: 0 .25em 0 rgba(23, 59, 109, 0.3), inset 0 1px 0 rgba(0, 0, 0, 0.3);
- -webkit-transition: all 150ms ease-in;
- -moz-transition: all 150ms ease-in;
- -o-transition: all 150ms ease-in;
- transition: all 150ms ease-in;
- }
- /**
- * 1. Note that some touch-based browsers will not apply the :active-state
- * on press, so this works best with keyboard or mouse.
- */
- button:active { /* 1 */
- box-shadow: 0 0 0 rgba(23, 59, 109, 0.3), inset 0 1px 0 rgba(0, 0, 0, 0.3);
- -webkit-transform: translateY(.25em);
- -moz-transform: translateY(.25em);
- -o-transform: translateY(.25em);
- transform: translateY(.25em);
- }
- </style>
- </head>
- <body>
- <button>Press me!</button>
- </body>
- </html>
|
