CSS-Tricks lodge button

Developer
Size
3,247 Kb
Views
14,168

How do I make an css-tricks lodge button?

This is what I think the CSS-Tricks Lodge Sign up button should look like and how I think it should work.. What is a css-tricks lodge button? How do you make a css-tricks lodge button? This script and codes were developed by Billy Brown on 20 November 2022, Sunday.

CSS-Tricks lodge button Previews

CSS-Tricks lodge button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS-Tricks lodge button</title> <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! */ * { box-sizing: border-box; margin: 0; padding: 0;
}
html { background: #d3d1d1; font-family: "Helvetica Neue", sans-serif;
}
a { color: #7f93ee; text-decoration: none;
}
a:hover { color: #213ab9;
}
h1 { font-size: 1.5em; margin: 0 0 0.8em;
}
p { font-size: 0.9em;
}
.signup { background: white; line-height: 1.5; margin: 2em auto; padding: 0.9375em; width: 12.8125em;
}
.signup--action { background: #4e68c7; border: none; box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891, 2px 3px 1px #3852b1, 4px 3px 1px #203891, 3px 4px 1px #3852b1, 5px 4px 1px #203891, 4px 5px 1px #3852b1, 6px 5px 1px #203891; color: white; display: block; font-family: "Comic Sans MS"; font-size: 1.5em; margin: 0.625em 0 -0.625em -0.625em; padding: 0.625em; outline: none; text-align: center; text-decoration: none; text-shadow: 1px 1px #1e3091; transform: translate(-0.25em, -0.25em); width: 8.54166em;
}
.signup--action:hover, .signup--action:focus { background: #3d57b4; color: white;
}
.signup--action:active { box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891; transform: translate(-0.1em, -0.1em);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <aside class="signup"> <section> <h1>Sign up!</h1> <p>Any way to fix the weird white line on button press-down?</p> <p>Inspired by the <a href="https://css-tricks.com">CSS-Tricks</a> buttons.</p> </section> <a href="#" class="signup--action">Sign up!</a>
</aside> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

CSS-Tricks lodge button - Script Codes CSS Codes

* { box-sizing: border-box; margin: 0; padding: 0;
}
html { background: #d3d1d1; font-family: "Helvetica Neue", sans-serif;
}
a { color: #7f93ee; text-decoration: none;
}
a:hover { color: #213ab9;
}
h1 { font-size: 1.5em; margin: 0 0 0.8em;
}
p { font-size: 0.9em;
}
.signup { background: white; line-height: 1.5; margin: 2em auto; padding: 0.9375em; width: 12.8125em;
}
.signup--action { background: #4e68c7; border: none; box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891, 2px 3px 1px #3852b1, 4px 3px 1px #203891, 3px 4px 1px #3852b1, 5px 4px 1px #203891, 4px 5px 1px #3852b1, 6px 5px 1px #203891; color: white; display: block; font-family: "Comic Sans MS"; font-size: 1.5em; margin: 0.625em 0 -0.625em -0.625em; padding: 0.625em; outline: none; text-align: center; text-decoration: none; text-shadow: 1px 1px #1e3091; transform: translate(-0.25em, -0.25em); width: 8.54166em;
}
.signup--action:hover, .signup--action:focus { background: #3d57b4; color: white;
}
.signup--action:active { box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891; transform: translate(-0.1em, -0.1em);
}
CSS-Tricks lodge button - Script Codes
CSS-Tricks lodge button - Script Codes
Home Page Home
Developer Billy Brown
Username _Billy_Brown
Uploaded November 20, 2022
Rating 3
Size 3,247 Kb
Views 14,168
Do you need developer help for CSS-Tricks lodge 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!

Billy Brown (_Billy_Brown) Script Codes
Create amazing love letters 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!