HTML CSS examples for CSS Animation:Slide
CSS animation moving and changing color, like slider thumbnail
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> section {<!--from w ww . j a v a 2 s . com--> padding: 20px; } .button { font-size: 16px; color: #000; box-shadow: 0 2px 0 #000, 0 -2px 0 #000; text-align: center; padding: 10px 0; font-family: sans-serif; position: relative; box-sizing: border-box; width: 200px; transition: color 1000ms; } .button:hover { color: red; } .button::before, .button::after { display: block; content: ''; width: 12px; height: 12px; box-shadow: inset 0 0 0 2px #000; position: absolute; top: -7px; left: -7px; transition: left 1000ms, right 1000ms, box-shadow 1000ms; } .button::after { top: auto; left: auto; bottom: -7px; right: -7px; } .button:hover::before, .button:hover::after { box-shadow: inset 0 0 0 2px red; } .button:hover::before { left: 194px; } .button:hover::after { right: 194px; } .lines { } .lines::before, .lines::after { display: block; content: ''; position: absolute; width: 0; height: 2px; background: red; top: -2px; left: 0; transition: width 1000ms; } .lines::after { top: auto; left: auto; right: 0; bottom: -2px; } .button:hover .lines::before, .button:hover .lines::after { width: 100%; } </style> </head> <body> <section> <div class="button"> Contact <div class="lines"> </div> </div> </section> </body> </html>