Off-registration button

Developer
Toshiyuki TAKAHASHI
Size
2,619 Kb
Views
22,264
  1. Off-registration button Previews
  2. Off-registration button HTML Codes
  3. Off-registration button CSS Codes

How do I make an off-registration button?

Css button. What is a off-registration button? How do you make a off-registration button? This script and codes were developed by Toshiyuki TAKAHASHI on 30 September 2022, Friday.

Off-registration button Previews
IQ Test

Off-registration button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Off-registration button</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/webfont/1.5.14/webfontloader.js'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div><a href="#" class="btn button-1">BUTTON-1</a></div>
<div><a href="#" class="btn button-2">BUTTON-2</a></div>
<div><a href="#" class="btn button-3">BUTTON-3</a></div>
<div><a href="#" class="btn button-4">BUTTON-4</a></div>
</body>
</html>

Off-registration button - Script Codes CSS Codes

body { background: #f9f6f1;
}
div { padding: 4em 0; text-align: center; z-index: 0; position: relative;
}
div:nth-child(1) { background: #7cd4d4 url(http://www.graphicartsunit.com/images/noise.png);
}
div:nth-child(2) { background: #e2df45 url(http://www.graphicartsunit.com/images/noise.png);
}
div:nth-child(3) { background: #e8afbb url(http://www.graphicartsunit.com/images/noise.png);
}
div:nth-child(4) { background: #8bc3e5 url(http://www.graphicartsunit.com/images/noise.png);
}
.btn { font-family: lato,sans-serif; font-weight: bold; font-size: 1em; letter-spacing: 0.1em; text-decoration: none; color: #03384b; display: inline-block; padding: 20px 40px 20px 40px; position: relative; border: 3px solid #03384b;
}
.btn:before { border: 3px solid #f9f6f1; background: url(http://www.graphicartsunit.com/images/noise2.png); position: absolute; content: ""; width: 100%; height: 100%; z-index: -1;
}
.button-1 { border-radius: 100em;
}
.button-1:before { border-radius: 100em; left: 2px; top: 1px;
}
.button-2 { border-radius: 5px;
}
.button-2:before { border-radius: 5px; left: 2px; top: 1px;
}
.button-3 { font-size: 1.5em; border: none; text-shadow: 2px 2px 0 #f9f6f1;
}
.button-3:before { content: none;
}
.button-4 { border-radius: 100em; text-shadow: 2px 2px 0 #f9f6f1;
}
.button-4:before { border-radius: 100em; background: transparent; left: -1px; top: -1px;
}
Off-registration button - Script Codes
Off-registration button - Script Codes
Home Page Home
Developer Toshiyuki TAKAHASHI
Username gau
Uploaded September 30, 2022
Rating 4.5
Size 2,619 Kb
Views 22,264
Do you need developer help for Off-registration button?

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!

Toshiyuki TAKAHASHI (gau) Script Codes
Name
Fixed line-height space
Blue light button
A Pen by Toshiyuki TAKAHASHI
OpenType features for body text
Bxslider hover test
Screen effect
Eliminate a gap from inline and inline-block
Add lines on both sides of the title by flex-box
Custom placeholder input
Gau9000
Create amazing video scripts 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!