Button - rainbow border

Developer
El Alemaño
Size
3,381 Kb
Views
18,216
  1. Button - rainbow border Previews
  2. Button - rainbow border HTML Codes
  3. Button - rainbow border CSS Codes

How do I make an button - rainbow border?

What is a button - rainbow border? How do you make a button - rainbow border? This script and codes were developed by El Alemaño on 15 November 2022, Tuesday.

Button - rainbow border Previews
IQ Test

Button - rainbow border - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Button - rainbow border</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="button-continer"> <div> <span>Inspirier mich</span> </div>
</div>
</body>
</html>

Button - rainbow border - Script Codes CSS Codes

/** Colors **/
/** Size **/
body { background-color: #fef4ce;
}
.button-continer { display: inline-block; margin: 50px auto; width: 300px; height: 60px; padding: 5px; position: relative; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwM2Q1YSIvPjxzdG9wIG9mZnNldD0iMTQuMjg1NzElIiBzdG9wLWNvbG9yPSIjNDAzZDVhIi8+PHN0b3Agb2Zmc2V0PSIxNC4yODU3MSUiIHN0b3AtY29sb3I9IiMwMGJiZTQiLz48c3RvcCBvZmZzZXQ9IjI4LjU3MTQzJSIgc3RvcC1jb2xvcj0iIzAwYmJlNCIvPjxzdG9wIG9mZnNldD0iMjguNTcxNDMlIiBzdG9wLWNvbG9yPSIjYzQ1MzkxIi8+PHN0b3Agb2Zmc2V0PSI0Mi44NTcxNCUiIHN0b3AtY29sb3I9IiNjNDUzOTEiLz48c3RvcCBvZmZzZXQ9IjQyLjg1NzE0JSIgc3RvcC1jb2xvcj0iI2VkNTgzNyIvPjxzdG9wIG9mZnNldD0iNTcuMTQyODYlIiBzdG9wLWNvbG9yPSIjZWQ1ODM3Ii8+PHN0b3Agb2Zmc2V0PSI1Ny4xNDI4NiUiIHN0b3AtY29sb3I9IiNmZWFhMjQiLz48c3RvcCBvZmZzZXQ9IjcxLjQyODU3JSIgc3RvcC1jb2xvcj0iI2ZlYWEyNCIvPjxzdG9wIG9mZnNldD0iNzEuNDI4NTclIiBzdG9wLWNvbG9yPSIjZjFjYTAzIi8+PHN0b3Agb2Zmc2V0PSI4NS43MTQyOSUiIHN0b3AtY29sb3I9IiNmMWNhMDMiLz48c3RvcCBvZmZzZXQ9Ijg1LjcxNDI5JSIgc3RvcC1jb2xvcj0iI2EwYzQ0NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2EwYzQ0NiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #403d5a), color-stop(14.28571%, #403d5a), color-stop(14.28571%, #00bbe4), color-stop(28.57143%, #00bbe4), color-stop(28.57143%, #c45391), color-stop(42.85714%, #c45391), color-stop(42.85714%, #ed5837), color-stop(57.14286%, #ed5837), color-stop(57.14286%, #feaa24), color-stop(71.42857%, #feaa24), color-stop(71.42857%, #f1ca03), color-stop(85.71429%, #f1ca03), color-stop(85.71429%, #a0c446), color-stop(100%, #a0c446)); background-image: -moz-linear-gradient(left, #403d5a 0%, #403d5a 14.28571%, #00bbe4 14.28571%, #00bbe4 28.57143%, #c45391 28.57143%, #c45391 42.85714%, #ed5837 42.85714%, #ed5837 57.14286%, #feaa24 57.14286%, #feaa24 71.42857%, #f1ca03 71.42857%, #f1ca03 85.71429%, #a0c446 85.71429%, #a0c446 100%); background-image: -webkit-linear-gradient(left, #403d5a 0%, #403d5a 14.28571%, #00bbe4 14.28571%, #00bbe4 28.57143%, #c45391 28.57143%, #c45391 42.85714%, #ed5837 42.85714%, #ed5837 57.14286%, #feaa24 57.14286%, #feaa24 71.42857%, #f1ca03 71.42857%, #f1ca03 85.71429%, #a0c446 85.71429%, #a0c446 100%); background-image: linear-gradient(to right, #403d5a 0%, #403d5a 14.28571%, #00bbe4 14.28571%, #00bbe4 28.57143%, #c45391 28.57143%, #c45391 42.85714%, #ed5837 42.85714%, #ed5837 57.14286%, #feaa24 57.14286%, #feaa24 71.42857%, #f1ca03 71.42857%, #f1ca03 85.71429%, #a0c446 85.71429%, #a0c446 100%); -moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px;
}
.button-continer:hover { cursor: pointer;
}
.button-continer div { position: relative; background-color: #fff; color: #535353; font-size: 38px; line-height: 38px; text-align: center; margin: 0 auto; height: 60px; -moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px;
}
.button-continer div span { position: absolute; top: 50%; margin-top: -19px; left: 0; width: 300px; text-align: center;
}
@-moz-keyframes roll { 0% { -moz-transform: rotate(0); transform: rotate(0); } 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes roll { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes roll { 0% { -moz-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } 100% { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
Button - rainbow border - Script Codes
Button - rainbow border - Script Codes
Home Page Home
Developer El Alemaño
Username elalemanyo
Uploaded November 15, 2022
Rating 3
Size 3,381 Kb
Views 18,216
Do you need developer help for Button - rainbow border?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

El Alemaño (elalemanyo) Script Codes
Name
Telefon Ring
Sound Wave Loading Animation
Video Scrolling
Glitch Text Example
Highlighttextarea
Now Reading Bubble
Dom loading
Spin
Playing with Trianglify
RGB Loading
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!