


Use css to achieve cool effects on the login button (with code examples)
Today I saw a cool login button effect on the Internet; it felt awesome at first glance; but after putting it aside bit by bit, I found that it is not that difficult; I will post all the code ; If there is anything wrong, please tell me.
Analysis
Let’s put aside the before; in fact, the principle is to achieve the color gradient effect through the background size and matching position.
- text-transform: uppercase; refers to converting letters to uppercase
- Then set the background and background size
- Change it when the mouse moves into (hover) the button Just position it
Effect 1:
This effect won’t be so cool, or flashy; I think if When writing some effects, this should be more suitable, and then just match the colors you need.
Copy the code to preview
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 230px; height: 90px; line-height: 90px; text-align: center; color: #fff; font-size: 25px; text-transform: uppercase; cursor: pointer; background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); background-size: 400%; border-radius: 60px; } .btn:hover { animation: animate 8s linear infinite; } @keyframes animate { 0% { background-position: 0%; } 100% { background-position: 400%; } } </style> </head> <body> <b href="#">register</b> </body> </html>
Effect 2:
Copy the code to preview
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 230px; height: 90px; line-height: 90px; text-align: center; color: #fff; font-size: 25px; text-transform: uppercase; cursor: pointer; background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); background-size: 400%; border-radius: 60px; } .btn:hover { animation: animate 8s linear infinite; } @keyframes animate { 0% { background-position: 0%; } 100% { background-position: 400%; } } .btn::before { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; z-index: -1; background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); background-size: 400%; border-radius: 40px; opacity: 0; transition: 0.5s; } .btn:hover::before { filter: blur(20px); opacity: 1; animation: animate 8s linear infinite; } </style> </head> <body> <b href="#">register</b> </body> </html>That’s all for today! You can copy the above code to show the effect. After looking at all kinds of cool styles on the Internet, I found that I am really a novice; I hope that in the future, I will read more cool styles written on the Internet. If I see any interesting ones, I will send them to you when the time comes. Come here to record it; I hope you will learn more and more in the future! Promote learning: "
css video tutorial"
The above is the detailed content of Use css to achieve cool effects on the login button (with code examples). For more information, please follow other related articles on the PHP Chinese website!

Yay, let's jump for text-wrap: pretty landing in Safari Technology Preview! But beware that it's different from how it works in Chromium browsers.

This CSS-Tricks update highlights significant progress in the Almanac, recent podcast appearances, a new CSS counters guide, and the addition of several new authors contributing valuable content.

Most of the time, people showcase Tailwind's @apply feature with one of Tailwind's single-property utilities (which changes a single CSS declaration). When showcased this way, @apply doesn't sound promising at all. So obvio

Deploying like an idiot comes down to a mismatch between the tools you use to deploy and the reward in complexity reduced versus complexity added.

There was once upon a time when native CSS lacked many essential features, leaving developers to come up with all sorts of ways to make CSS easier to write over the years.

HTML 5 Readiness was a site that showed through a rainbow of colors the browser support for several web features. What about a new version?

One thing we can do to help teams code consistently is provide type-checking so that all of the configurable options for a specific component are available while coding. Bryan demonstrates how he does this with TypeScript when working with Astro comp

If you've ever had to display an interactive animation during a live talk or a class, then you may know that it's not always easy to interact with your slides


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

Zend Studio 13.0.1
Powerful PHP integrated development environment

SublimeText3 English version
Recommended: Win version, supports code prompts!