Buttons
How do I make an buttons?
What is a buttons? How do you make a buttons? This script and codes were developed by Tylersnyder on 26 September 2022, Monday.
Buttons - Script Codes HTML Codes
<!DOCTYPE html>
<html class="demo">
<head> <meta charset="UTF-8"> <title>Buttons</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link href='https://fonts.googleapis.com/css?family=Vollkorn:400italic,700italic,400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ *, *:before, *:after { box-sizing: border-box;
}
body { margin: 0 auto; font-family: "proxima-nova-soft", sans-serif; font-size: 18px; background-color: #fff; color: #aaa;
}
a { color: dodgerblue; text-decoration: none; font-weight: 700;
}
.button { margin: 0; padding: 12px 18px; display: inline-block; border-radius: 3px; border: solid 1px #d73030; border-bottom: solid 2px firebrick; font-size: 16px; font-weight: 400; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset; background-color: #d73030; color: #fff; color: rgba(255, 255, 255, 0.9); vertical-align: bottom; transition: all 0.3s ease;
}
.button:hover { background-color: #de5252;
}
.button.secondary { border-color: dodgerblue; border-bottom-color: royalblue; background-color: dodgerblue;
}
.button.secondary:hover { background-color: #47a4ff;
}
.button.default { border-color: #ddd; border-bottom-color: #ccc; text-shadow: 0 1px 1px #fff; box-shadow: 0 1px 0 #fcfcfc inset; background-color: #eee; color: #999;
}
.button.default:hover { background-color: #f8f8f8;
}
.button.xsmall { padding: 4px 8px; border-radius: 2px; border-bottom-width: 1px; text-shadow: none; font-size: 12px;
}
.button.small { padding: 8px 12px; border-bottom-width: 1px; font-size: 14px;
}
.button.large { padding: 16px 24px; font-size: 23px;
}
.button.expand { width: 100%; text-align: center;
}
img { max-width: 100%; height: auto;
}
.grid { padding: 20px; *zoom: 1;
}
.grid:after { content: ""; display: table; clear: both;
}
.grid > [class*="--columns"] { float: left; padding-right: 20px;
}
.grid > [class*="--columns"]:last-of-type { padding-right: 0;
}
.grid > [class*="--centered"] { margin: 0 auto; float: none;
}
@media screen and (min-width: 600px) { .grid .four--columns { width: 33.3333%; }
}
.demo { background-color: #eee;
}
.demo .button { margin-bottom: 6px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section class="grid"> <div class="four--columns"> <h2>Buttons</h2> <a class="xsmall button">.xsmall .button</a> <a class="small button">.small .button</a> <a class="button">.button</a> <a class="large button">.large .button</a> <a class="button expand">.button .expand</a> </div> <div class="four--columns"> <h2>Secondary buttons</h2> <a class="xsmall secondary button">.xsmall .secondary .button</a> <a class="small secondary button">.small .secondary .button</a> <a class="secondary button">.secondary .button</a> <a class="large secondary button expand">.large .secondary .button .expand</a> </div> <div class="four--columns"> <h2>Default buttons</h2> <a class="xsmall default button">.xsmall .default .button</a> <a class="small default button">.small .default .button</a> <a class="default button">.default .button</a> <a class="large default button">.large .default .button</a> </div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://use.typekit.net/dxd7fnz.js'></script> <script src="js/index.js"></script>
</body>
</html>
Buttons - Script Codes CSS Codes
*, *:before, *:after { box-sizing: border-box;
}
body { margin: 0 auto; font-family: "proxima-nova-soft", sans-serif; font-size: 18px; background-color: #fff; color: #aaa;
}
a { color: dodgerblue; text-decoration: none; font-weight: 700;
}
.button { margin: 0; padding: 12px 18px; display: inline-block; border-radius: 3px; border: solid 1px #d73030; border-bottom: solid 2px firebrick; font-size: 16px; font-weight: 400; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset; background-color: #d73030; color: #fff; color: rgba(255, 255, 255, 0.9); vertical-align: bottom; transition: all 0.3s ease;
}
.button:hover { background-color: #de5252;
}
.button.secondary { border-color: dodgerblue; border-bottom-color: royalblue; background-color: dodgerblue;
}
.button.secondary:hover { background-color: #47a4ff;
}
.button.default { border-color: #ddd; border-bottom-color: #ccc; text-shadow: 0 1px 1px #fff; box-shadow: 0 1px 0 #fcfcfc inset; background-color: #eee; color: #999;
}
.button.default:hover { background-color: #f8f8f8;
}
.button.xsmall { padding: 4px 8px; border-radius: 2px; border-bottom-width: 1px; text-shadow: none; font-size: 12px;
}
.button.small { padding: 8px 12px; border-bottom-width: 1px; font-size: 14px;
}
.button.large { padding: 16px 24px; font-size: 23px;
}
.button.expand { width: 100%; text-align: center;
}
img { max-width: 100%; height: auto;
}
.grid { padding: 20px; *zoom: 1;
}
.grid:after { content: ""; display: table; clear: both;
}
.grid > [class*="--columns"] { float: left; padding-right: 20px;
}
.grid > [class*="--columns"]:last-of-type { padding-right: 0;
}
.grid > [class*="--centered"] { margin: 0 auto; float: none;
}
@media screen and (min-width: 600px) { .grid .four--columns { width: 33.3333%; }
}
.demo { background-color: #eee;
}
.demo .button { margin-bottom: 6px;
}
Buttons - Script Codes JS Codes
try { Typekit.load();
}
catch(e) {}
Developer | Tylersnyder |
Username | tylersnyder |
Uploaded | September 26, 2022 |
Rating | 3 |
Size | 4,261 Kb |
Views | 12,144 |
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!
Name | Size |
Infield Top Aligned Form Labels | 3,899 Kb |
A Pen by tylersnyder | 14,937 Kb |
Type Carousel 2 | 4,286 Kb |
Calculate age from birth date | 1,929 Kb |
Foundicon Icon Set | 16,017 Kb |
DailyUI Credit Card Form | 7,877 Kb |
Purple style guide | 6,011 Kb |
A Pen by tylersnyder | 2,382 Kb |
Agency Success Notification | 4,479 Kb |
Reforms.css | 5,928 Kb |
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!
Name | Username | Size |
Custom checkbox example | Capelo | 3,495 Kb |
Project MMetro beta | Atomicsong | 5,157 Kb |
3D flipping card | Ssaakkaa | 2,238 Kb |
Scroll to top button | DominicFrancois | 3,743 Kb |
Hello People | Danburrows | 2,365 Kb |
Prism | Pyrografix | 2,843 Kb |
Flex Chart | James_zedd | 4,111 Kb |
Drifting Clouds | Benedikte | 2,247 Kb |
Responsive Table-less Shopping Cart | Alex_rodrigues | 6,637 Kb |
Vertically rotating text with CSS | Nopr | 2,141 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!