What we will achieve is the following effect (if the effect does not appear, Please refresh): The analysis mainly uses the transition, animation, transform, gradient background and other features of CSS3. Because buttons have different styles when you move the mouse over them, you need to use another background style for the hover status to add an element with blank content to the "after" Status of the button, and give it a border, so that after the mouse enters, we will make the hidden empty element larger until it fades out, and we will see the effect of building the basic button style as an example, our page will be very simple, just put a tag as a button, and then write a style for it to make it look more like a button. And defines the: after element. <Style type = "text/css">. button {cursor: pointer; text-decoration: none; padding: 10px; color: # fff; border-radius: 10px; position: absolute; top: 100px; left: 48%; background: linear-gradient (# 93c, # 50c); border: 1px solid purple ;}. button: after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; opacity: 0; border: 1px solid purple ;}. button: hover {background: linear-gradient (# b5e, # 93c) ;}</style> <body> <a class = "button" href = "javascript: void (0); "> Fake Button </a> </body> to add an animation, use keyframes to define the animation @-webkit-keyframes boom {0% {opacity: 0} 5% {opacity: 1} 100% {-webkit-transform: scale (1.3); transform: scale (1.3); opacity: 0 }}@ keyframes boom {0% {opacity: 0} 5% {opacity: 1} 100% {transform: scale (1.3); transform: scale (1.3); opacity: 0} then apply it to the hidden elements behind the button. button: hover: after {-webkit-animation: boom 0.5 s elapsed; animation: boom 0.5 s elapsed ;}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
