Glowing Gradient Button Animation Effects using CSS

Post author:Santosh Adhikari
Post published:October 3, 2019
Post category:Uncategorized
Post comments:0 Comments

Spread the love

Animation Effects using CSS

Do you want to create an amazing button for your website? If yes you have come to the right place. Simply follow these simple steps and see the magic.

First Open any text editor such as notepad, notepad++, Sublime Text editor etc. Save that file naming ‘index.html‘ and copy these html codes and paste to your text editor and save that file

<!DOCTYPE html><head> <title>Button</title> <link rel=”stylesheet” type=”text/css” href=”style.css”></head> <a href=”https://studywholenight.com/#”>Button</a>

Glowing Gradient Button Animation Effects

Now, again copy these CSS codes given below and paste these codes to new file and save as ‘ style.css ‘
Note: save both files in the same directory(folder).
and simply open index file and you can see the output result. body{ margin: 0; padding: 0; background: #000; } a{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 200px; height: 60px; text-align: center; line-height: 60px; color: #fff; font-size: 24px; text-decoration: none; text-transform: uppercase; font-family: sans-serif; box-sizing: border-box; background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); background-size: 400%; border-radius: 30px; z-index: 1; } a:hover { animation: animate 8s linear infinite; } @keyframes animate { 0% { background-position: 0%; } 100% { background-position: 400%; } } a: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; filter: blur(20px); opacity: 0; transition: 0.5s; } a:hover:before{ filter: blur(20px); opacity: 1; animation: animate 8s linear infinite; }

Spread the love

Santosh Adhikari

Hello, it's me Santosh Adhikari, from Kathmandu, Nepal. I'm a student of Science and Technology. I love new challenges and want to explore more on Software Quality Assurance. I want to be a professional SQA. I'm also interested in Blogging, SEO activities.