• ;
  • A Coding Boy
  • Blog
  • Videos
  • Projects
  • Home
HTML AND CSS
LOGIN PAGE
WEBSITE DESGIN
API PROJECTS
CARD DESGIN
JAVASCRIPTS GAMES
JAVASCRIPT PROJECTS
JAVA PROJECTS
PYTHON PROJECTS
demo post
only for demo nasa prospect
only for demo the gonnies
most popular
how to create parallax website
how to create a beautiful card
how to create a netflix login page
how to create flipping ui card
how to create image generator website
Build A Currency Converter App in HTML CSS & JavaScript
Hey friends, today in this blog, you’ll learn how to Build A Currency Converter App in HTML CSS & JavaScript. In this app (Currency Converter in JavaScript), you can enter your amount and convert your currency to a different country’s currency. You can’t leave the amount field blank or enter 0 as an amount. If you do it, then “1” will be filled automatically in the amount field.
You can also easily exchange or reverse the two countries’ currency by clicking on the exchange icon. If you didn’t understand, then you can watch a demo or video tutorial of this project (JavaScript Currency Converter).
Currency Converter App in JavaScript [Source Codes]
To create this project (Currency Converter in JavaScript). First, you need to create four Files: HTML, CSS & JavaScript Files. After creating these files just paste the following codes into your file. You can also download the source code files of this Currency Converter from the given download button.
First, paste the following codes into your index.html file.
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Currency Converter App in JavaScript | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- FontAweome CDN Link for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="wrapper">
<header>Currency Converter</header>
<form action="#">
<div class="amount">
<p>Enter Amount</p>
<input type="text" value="1">
</div>
<div class="drop-list">
<div class="from">
<p>From</p>
<div class="select-box">
<img src="https://flagcdn.com/48x36/us.png" alt="flag">
<select> <!-- Options tag are inserted from JavaScript --> </select>
</div>
</div>
<div class="icon"><i class="fas fa-exchange-alt"></i></div>
<div class="to">
<p>To</p>
<div class="select-box">
<img src="https://flagcdn.com/48x36/np.png" alt="flag">
<select> <!-- Options tag are inserted from JavaScript --> </select>
</div>
</div>
</div>
<div class="exchange-rate">Getting exchange rate...</div>
<button>Get Exchange Rate</button>
</form>
</div>
<script src="js/country-list.js"></script>
<script src="js/script.js"></script>
</body>
</html>
<!DOCTYPE html> <!-- Coding By CodingNepal - youtube.com/codingnepal --> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Currency Converter App in JavaScript | CodingNepal</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- FontAweome CDN Link for Icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/> </head> <body> <div class="wrapper"> <header>Currency Converter</header> <form action="#"> <div class="amount"> <p>Enter Amount</p> <input type="text" value="1"> </div> <div class="drop-list"> <div class="from"> <p>From</p> <div class="select-box"> <img src="https://flagcdn.com/48x36/us.png" alt="flag"> <select> <!-- Options tag are inserted from JavaScript --> </select> </div> </div> <div class="icon"><i class="fas fa-exchange-alt"></i></div> <div class="to"> <p>To</p> <div class="select-box"> <img src="https://flagcdn.com/48x36/np.png" alt="flag"> <select> <!-- Options tag are inserted from JavaScript --> </select> </div> </div> </div> <div class="exchange-rate">Getting exchange rate...</div> <button>Get Exchange Rate</button> </form> </div> <script src="js/country-list.js"></script> <script src="js/script.js"></script> </body> </html>
Second, paste the following codes into your style.css file
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 0 10px;
background: #675AFE;
}
::selection{
color: #fff;
background: #675AFE;
}
.wrapper{
width: 370px;
padding: 30px;
border-radius: 7px;
background: #fff;
box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05);
}
.wrapper header{
font-size: 28px;
font-weight: 500;
text-align: center;
}
.wrapper form{
margin: 40px 0 20px 0;
}
form :where(input, select, button){
width: 100%;
outline: none;
border-radius: 5px;
border: none;
}
form p{
font-size: 18px;
margin-bottom: 5px;
}
form input{
height: 50px;
font-size: 17px;
padding: 0 15px;
border: 1px solid #999;
}
form input:focus{
padding: 0 14px;
border: 2px solid #675AFE;
}
form .drop-list{
display: flex;
margin-top: 20px;
align-items: center;
justify-content: space-between;
}
.drop-list .select-box{
display: flex;
width: 115px;
height: 45px;
align-items: center;
border-radius: 5px;
justify-content: center;
border: 1px solid #999;
}
.select-box img{
max-width: 21px;
}
.select-box select{
width: auto;
font-size: 16px;
background: none;
margin: 0 -5px 0 5px;
}
.select-box select::-webkit-scrollbar{
width: 8px;
}
.select-box select::-webkit-scrollbar-track{
background: #fff;
}
.select-box select::-webkit-scrollbar-thumb{
background: #888;
border-radius: 8px;
border-right: 2px solid #ffffff;
}
.drop-list .icon{
cursor: pointer;
margin-top: 30px;
font-size: 22px;
}
form .exchange-rate{
font-size: 17px;
margin: 20px 0 30px;
}
form button{
height: 52px;
color: #fff;
font-size: 17px;
cursor: pointer;
background: #675AFE;
transition: 0.3s ease;
}
form button:hover{
background: #4534fe;
}
/* Import Google Font - Poppins */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 0 10px; background: #675AFE; } ::selection{ color: #fff; background: #675AFE; } .wrapper{ width: 370px; padding: 30px; border-radius: 7px; background: #fff; box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05); } .wrapper header{ font-size: 28px; font-weight: 500; text-align: center; } .wrapper form{ margin: 40px 0 20px 0; } form :where(input, select, button){ width: 100%; outline: none; border-radius: 5px; border: none; } form p{ font-size: 18px; margin-bottom: 5px; } form input{ height: 50px; font-size: 17px; padding: 0 15px; border: 1px solid #999; } form input:focus{ padding: 0 14px; border: 2px solid #675AFE; } form .drop-list{ display: flex; margin-top: 20px; align-items: center; justify-content: space-between; } .drop-list .select-box{ display: flex; width: 115px; height: 45px; align-items: center; border-radius: 5px; justify-content: center; border: 1px solid #999; } .select-box img{ max-width: 21px; } .select-box select{ width: auto; font-size: 16px; background: none; margin: 0 -5px 0 5px; } .select-box select::-webkit-scrollbar{ width: 8px; } .select-box select::-webkit-scrollbar-track{ background: #fff; } .select-box select::-webkit-scrollbar-thumb{ background: #888; border-radius: 8px; border-right: 2px solid #ffffff; } .drop-list .icon{ cursor: pointer; margin-top: 30px; font-size: 22px; } form .exchange-rate{ font-size: 17px; margin: 20px 0 30px; } form button{ height: 52px; color: #fff; font-size: 17px; cursor: pointer; background: #675AFE; transition: 0.3s ease; } form button:hover{ background: #4534fe; }
Last, paste the following codes into your script.js file.
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
let country_list = {
"AED" : "AE",
"AFN" : "AF",
"XCD" : "AG",
"ALL" : "AL",
"AMD" : "AM",
"ANG" : "AN",
"AOA" : "AO",
"AQD" : "AQ",
"ARS" : "AR",
"AUD" : "AU",
"AZN" : "AZ",
"BAM" : "BA",
"BBD" : "BB",
"BDT" : "BD",
"XOF" : "BE",
"BGN" : "BG",
"BHD" : "BH",
"BIF" : "BI",
"BMD" : "BM",
"BND" : "BN",
"BOB" : "BO",
"BRL" : "BR",
"BSD" : "BS",
"NOK" : "BV",
"BWP" : "BW",
"BYR" : "BY",
"BZD" : "BZ",
"CAD" : "CA",
"CDF" : "CD",
"XAF" : "CF",
"CHF" : "CH",
"CLP" : "CL",
"CNY" : "CN",
"COP" : "CO",
"CRC" : "CR",
"CUP" : "CU",
"CVE" : "CV",
"CYP" : "CY",
"CZK" : "CZ",
"DJF" : "DJ",
"DKK" : "DK",
"DOP" : "DO",
"DZD" : "DZ",
"ECS" : "EC",
"EEK" : "EE",
"EGP" : "EG",
"ETB" : "ET",
"EUR" : "FR",
"FJD" : "FJ",
"FKP" : "FK",
"GBP" : "GB",
"GEL" : "GE",
"GGP" : "GG",
"GHS" : "GH",
"GIP" : "GI",
"GMD" : "GM",
"GNF" : "GN",
"GTQ" : "GT",
"GYD" : "GY",
"HKD" : "HK",
"HNL" : "HN",
"HRK" : "HR",
"HTG" : "HT",
"HUF" : "HU",
"IDR" : "ID",
"ILS" : "IL",
"INR" : "IN",
"IQD" : "IQ",
"IRR" : "IR",
"ISK" : "IS",
"JMD" : "JM",
"JOD" : "JO",
"JPY" : "JP",
"KES" : "KE",
"KGS" : "KG",
"KHR" : "KH",
"KMF" : "KM",
"KPW" : "KP",
"KRW" : "KR",
"KWD" : "KW",
"KYD" : "KY",
"KZT" : "KZ",
"LAK" : "LA",
"LBP" : "LB",
"LKR" : "LK",
"LRD" : "LR",
"LSL" : "LS",
"LTL" : "LT",
"LVL" : "LV",
"LYD" : "LY",
"MAD" : "MA",
"MDL" : "MD",
"MGA" : "MG",
"MKD" : "MK",
"MMK" : "MM",
"MNT" : "MN",
"MOP" : "MO",
"MRO" : "MR",
"MTL" : "MT",
"MUR" : "MU",
"MVR" : "MV",
"MWK" : "MW",
"MXN" : "MX",
"MYR" : "MY",
"MZN" : "MZ",
"NAD" : "NA",
"XPF" : "NC",
"NGN" : "NG",
"NIO" : "NI",
"NPR" : "NP",
"NZD" : "NZ",
"OMR" : "OM",
"PAB" : "PA",
"PEN" : "PE",
"PGK" : "PG",
"PHP" : "PH",
"PKR" : "PK",
"PLN" : "PL",
"PYG" : "PY",
"QAR" : "QA",
"RON" : "RO",
"RSD" : "RS",
"RUB" : "RU",
"RWF" : "RW",
"SAR" : "SA",
"SBD" : "SB",
"SCR" : "SC",
"SDG" : "SD",
"SEK" : "SE",
"SGD" : "SG",
"SKK" : "SK",
"SLL" : "SL",
"SOS" : "SO",
"SRD" : "SR",
"STD" : "ST",
"SVC" : "SV",
"SYP" : "SY",
"SZL" : "SZ",
"THB" : "TH",
"TJS" : "TJ",
"TMT" : "TM",
"TND" : "TN",
"TOP" : "TO",
"TRY" : "TR",
"TTD" : "TT",
"TWD" : "TW",
"TZS" : "TZ",
"UAH" : "UA",
"UGX" : "UG",
"USD" : "US",
"UYU" : "UY",
"UZS" : "UZ",
"VEF" : "VE",
"VND" : "VN",
"VUV" : "VU",
"YER" : "YE",
"ZAR" : "ZA",
"ZMK" : "ZM",
"ZWD" : "ZW"
}
let country_list = { "AED" : "AE", "AFN" : "AF", "XCD" : "AG", "ALL" : "AL", "AMD" : "AM", "ANG" : "AN", "AOA" : "AO", "AQD" : "AQ", "ARS" : "AR", "AUD" : "AU", "AZN" : "AZ", "BAM" : "BA", "BBD" : "BB", "BDT" : "BD", "XOF" : "BE", "BGN" : "BG", "BHD" : "BH", "BIF" : "BI", "BMD" : "BM", "BND" : "BN", "BOB" : "BO", "BRL" : "BR", "BSD" : "BS", "NOK" : "BV", "BWP" : "BW", "BYR" : "BY", "BZD" : "BZ", "CAD" : "CA", "CDF" : "CD", "XAF" : "CF", "CHF" : "CH", "CLP" : "CL", "CNY" : "CN", "COP" : "CO", "CRC" : "CR", "CUP" : "CU", "CVE" : "CV", "CYP" : "CY", "CZK" : "CZ", "DJF" : "DJ", "DKK" : "DK", "DOP" : "DO", "DZD" : "DZ", "ECS" : "EC", "EEK" : "EE", "EGP" : "EG", "ETB" : "ET", "EUR" : "FR", "FJD" : "FJ", "FKP" : "FK", "GBP" : "GB", "GEL" : "GE", "GGP" : "GG", "GHS" : "GH", "GIP" : "GI", "GMD" : "GM", "GNF" : "GN", "GTQ" : "GT", "GYD" : "GY", "HKD" : "HK", "HNL" : "HN", "HRK" : "HR", "HTG" : "HT", "HUF" : "HU", "IDR" : "ID", "ILS" : "IL", "INR" : "IN", "IQD" : "IQ", "IRR" : "IR", "ISK" : "IS", "JMD" : "JM", "JOD" : "JO", "JPY" : "JP", "KES" : "KE", "KGS" : "KG", "KHR" : "KH", "KMF" : "KM", "KPW" : "KP", "KRW" : "KR", "KWD" : "KW", "KYD" : "KY", "KZT" : "KZ", "LAK" : "LA", "LBP" : "LB", "LKR" : "LK", "LRD" : "LR", "LSL" : "LS", "LTL" : "LT", "LVL" : "LV", "LYD" : "LY", "MAD" : "MA", "MDL" : "MD", "MGA" : "MG", "MKD" : "MK", "MMK" : "MM", "MNT" : "MN", "MOP" : "MO", "MRO" : "MR", "MTL" : "MT", "MUR" : "MU", "MVR" : "MV", "MWK" : "MW", "MXN" : "MX", "MYR" : "MY", "MZN" : "MZ", "NAD" : "NA", "XPF" : "NC", "NGN" : "NG", "NIO" : "NI", "NPR" : "NP", "NZD" : "NZ", "OMR" : "OM", "PAB" : "PA", "PEN" : "PE", "PGK" : "PG", "PHP" : "PH", "PKR" : "PK", "PLN" : "PL", "PYG" : "PY", "QAR" : "QA", "RON" : "RO", "RSD" : "RS", "RUB" : "RU", "RWF" : "RW", "SAR" : "SA", "SBD" : "SB", "SCR" : "SC", "SDG" : "SD", "SEK" : "SE", "SGD" : "SG", "SKK" : "SK", "SLL" : "SL", "SOS" : "SO", "SRD" : "SR", "STD" : "ST", "SVC" : "SV", "SYP" : "SY", "SZL" : "SZ", "THB" : "TH", "TJS" : "TJ", "TMT" : "TM", "TND" : "TN", "TOP" : "TO", "TRY" : "TR", "TTD" : "TT", "TWD" : "TW", "TZS" : "TZ", "UAH" : "UA", "UGX" : "UG", "USD" : "US", "UYU" : "UY", "UZS" : "UZ", "VEF" : "VE", "VND" : "VN", "VUV" : "VU", "YER" : "YE", "ZAR" : "ZA", "ZMK" : "ZM", "ZWD" : "ZW" }
Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. You’ve to create a file with .js extension and remember you have to pass your API key in the API URL otherwise this currency converter won’t work and it returns “something went wrong” error. You can get this key from the official ExchageRateAPI site for free.
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
const dropList = document.querySelectorAll("form select"),
fromCurrency = document.querySelector(".from select"),
toCurrency = document.querySelector(".to select"),
getButton = document.querySelector("form button");
for (let i = 0; i < dropList.length; i++) {
for(let currency_code in country_list){
let selected = i == 0 ? currency_code == "USD" ? "selected" : "" : currency_code == "NPR" ? "selected" : "";
let optionTag = `<option value="${currency_code}" ${selected}>${currency_code}</option>`;
dropList[i].insertAdjacentHTML("beforeend", optionTag);
}
dropList[i].addEventListener("change", e =>{
loadFlag(e.target);
});
}
function loadFlag(element){
for(let code in country_list){
if(code == element.value){
let imgTag = element.parentElement.querySelector("img");
imgTag.src = `https://flagcdn.com/48x36/${country_list[code].toLowerCase()}.png`;
}
}
}
window.addEventListener("load", ()=>{
getExchangeRate();
});
getButton.addEventListener("click", e =>{
e.preventDefault();
getExchangeRate();
});
const exchangeIcon = document.querySelector("form .icon");
exchangeIcon.addEventListener("click", ()=>{
let tempCode = fromCurrency.value;
fromCurrency.value = toCurrency.value;
toCurrency.value = tempCode;
loadFlag(fromCurrency);
loadFlag(toCurrency);
getExchangeRate();
})
function getExchangeRate(){
const amount = document.querySelector("form input");
const exchangeRateTxt = document.querySelector("form .exchange-rate");
let amountVal = amount.value;
if(amountVal == "" || amountVal == "0"){
amount.value = "1";
amountVal = 1;
}
exchangeRateTxt.innerText = "Getting exchange rate...";
let url = `https://v6.exchangerate-api.com/v6/YOUR-API-KEY/latest/${fromCurrency.value}`;
fetch(url).then(response => response.json()).then(result =>{
let exchangeRate = result.conversion_rates[toCurrency.value];
let totalExRate = (amountVal * exchangeRate).toFixed(2);
exchangeRateTxt.innerText = `${amountVal} ${fromCurrency.value} = ${totalExRate} ${toCurrency.value}`;
}).catch(() =>{
exchangeRateTxt.innerText = "Something went wrong";
});
}
const dropList = document.querySelectorAll("form select"), fromCurrency = document.querySelector(".from select"), toCurrency = document.querySelector(".to select"), getButton = document.querySelector("form button"); for (let i = 0; i < dropList.length; i++) { for(let currency_code in country_list){ let selected = i == 0 ? currency_code == "USD" ? "selected" : "" : currency_code == "NPR" ? "selected" : ""; let optionTag = `<option value="${currency_code}" ${selected}>${currency_code}</option>`; dropList[i].insertAdjacentHTML("beforeend", optionTag); } dropList[i].addEventListener("change", e =>{ loadFlag(e.target); }); } function loadFlag(element){ for(let code in country_list){ if(code == element.value){ let imgTag = element.parentElement.querySelector("img"); imgTag.src = `https://flagcdn.com/48x36/${country_list[code].toLowerCase()}.png`; } } } window.addEventListener("load", ()=>{ getExchangeRate(); }); getButton.addEventListener("click", e =>{ e.preventDefault(); getExchangeRate(); }); const exchangeIcon = document.querySelector("form .icon"); exchangeIcon.addEventListener("click", ()=>{ let tempCode = fromCurrency.value; fromCurrency.value = toCurrency.value; toCurrency.value = tempCode; loadFlag(fromCurrency); loadFlag(toCurrency); getExchangeRate(); }) function getExchangeRate(){ const amount = document.querySelector("form input"); const exchangeRateTxt = document.querySelector("form .exchange-rate"); let amountVal = amount.value; if(amountVal == "" || amountVal == "0"){ amount.value = "1"; amountVal = 1; } exchangeRateTxt.innerText = "Getting exchange rate..."; let url = `https://v6.exchangerate-api.com/v6/YOUR-API-KEY/latest/${fromCurrency.value}`; fetch(url).then(response => response.json()).then(result =>{ let exchangeRate = result.conversion_rates[toCurrency.value]; let totalExRate = (amountVal * exchangeRate).toFixed(2); exchangeRateTxt.innerText = `${amountVal} ${fromCurrency.value} = ${totalExRate} ${toCurrency.value}`; }).catch(() =>{ exchangeRateTxt.innerText = "Something went wrong"; }); }
That’s all, now you’ve successfully built a Currency Converter App in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem, please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it. After extracting the file, open the JavaScript file and pass your API key in the API URL. You can get this key from the official ExchageRateAPI site for free. You can also use any other site API for this project. If you do so then you have to modify the JavaScript codes accordingly.
live demo
Download files
Info
Home
Projects
Blogs
Videos
About us
Follow us for more!
© 2023 All Rights Reserved A Coding Boy

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glassmorphism Login Form | CodingNepal</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <form action="#"> <h2>Login</h2> <div class="input-field"> <input type="text" required> <label>Enter your email</label> </div> <div class="input-field"> <input type="password" required> <label>Enter your password</label> </div> <div class="forget"> <label for="remember"> <input type="checkbox" id="remember"> <p>Remember me</p> </label> <a href="#">Forgot password?</a> </div> <button type="submit">Log In</button> <div class="register"> <p>Don't have an account? <a href="#">Register</a></p> </div> </form> </div> </body> </html>

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Open Sans", sans-serif; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; padding: 0 10px; } body::before { content: ""; position: absolute; width: 100%; height: 100%; background: url("https://www.codingnepalweb.com/demos/create-glassmorphism-login-form-html-css/hero-bg.jpg"), #000; background-position: center; background-size: cover; } .wrapper { width: 400px; border-radius: 8px; padding: 30px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.5); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } form { display: flex; flex-direction: column; } h2 { font-size: 2rem; margin-bottom: 20px; color: #fff; } .input-field { position: relative; border-bottom: 2px solid #ccc; margin: 15px 0; } .input-field label { position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: #fff; font-size: 16px; pointer-events: none; transition: 0.15s ease; } .input-field input { width: 100%; height: 40px; background: transparent; border: none; outline: none; font-size: 16px; color: #fff; } .input-field input:focus~label, .input-field input:valid~label { font-size: 0.8rem; top: 10px; transform: translateY(-120%); } .forget { display: flex; align-items: center; justify-content: space-between; margin: 25px 0 35px 0; color: #fff; } #remember { accent-color: #fff; } .forget label { display: flex; align-items: center; } .forget label p { margin-left: 8px; } .wrapper a { color: #efefef; text-decoration: none; } .wrapper a:hover { text-decoration: underline; } button { background: #fff; color: #000; font-weight: 600; border: none; padding: 12px 20px; cursor: pointer; border-radius: 3px; font-size: 16px; border: 2px solid transparent; transition: 0.3s ease; } button:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.15); } .register { text-align: center; margin-top: 30px; color: #fff;}

+