web-button-styles
Advanced tools
CSS and SCSS base styles for buttons, distributed as an NPM package.
CSS and SCSS base styles for buttons, distributed as an NPM package.
npm install --save web-button-styles
yarn add web-button-styles
There are two main ways of using this package: in CSS or SCSS. After the source is included, HTML markup usage is the same for either method.
If you're writing SCSS that will be compiled later using the Sass preprocessor, just import the SCSS file wherever you like:
@import "PATH/TO/node_modules/web-button-styles/web-button-styles";
Otherwise, if you're working with plain CSS, you can import either the minified stylesheet (compiled-web-styles.min.css):
<!-- Probably in the <head> element: -->
<link rel="stylesheet" href="/PATH/TO/node_modules/web-button-styles/web-button-styles.min.css">
or the unminified stylesheet (compiled-web-button-styles.css)
<!-- Probably in the <head> element: -->
<link rel="stylesheet" href="/PATH/TO/node_modules/web-button-styles/web-button-styles.css">
After including the source in your SCSS or CSS, buttons are used like so:
<button>Default</button>
<button class="primary">Primary</button>
<button class="secondary">Secondary</button>
Or, even better:
<button type="button">Default</button>
<button type="button" class="primary">Primary</button>
<button type="button" class="secondary">Secondary</button>
This snippet shows all the basic types, classes, and combinations:
<!-- Normal, Solid Buttons -->
<button type="button">Default</button>
<button type="button" class="primary">Primary</button>
<button type="button" class="secondary">Secondary</button>
<!-- Outline Buttons -->
<button type="button" class="outline">Default</button>
<button type="button" class="primary outline">Primary</button>
<button type="button" class="secondary outline">Secondary</button>
<!-- Round Buttons -->
<button type="button" class="round">Default</button>
<button type="button" class="primary round">Primary</button>
<button type="button" class="secondary round">Secondary</button>
<!-- Round, Outline Buttons -->
<button type="button" class="round outline">Default</button>
<button type="button" class="primary round outline">Primary</button>
<button type="button" class="secondary round outline">Secondary</button>
<!-- Button-type Inputs -->
<input type="button" value="Button">
<input type="submit" value="Submit" class="primary">
<input type="reset" value="Reset" class="secondary outline">
<!-- Button-Styled Link (Anchor) -->
<a href="#" class="button">Link As Button</a>
<!-- Full, Block-Width Button -->
<button type="button" class="block">Block Button</button>
<!-- Icon Button (with primary style) -->
<button type="button" class="icon-button primary">
<span class="icon-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">...</svg>
</span>
<span class="text-content">Icon Button</span>
</button>
<!-- Icon Button (with secondary style) -->
<button type="button" class="icon-button secondary">
<span class="icon-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">...</svg>
</span>
<span class="text-content">Icon Button</span>
</button>
<!-- Icon Button (with outline style) -->
<button type="button" class="icon-button outline">
<span class="icon-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">...</svg>
</span>
<span class="text-content">Icon Button</span>
</button>
<!-- Icon-Only Button -->
<button type="button" class="icon-only-button secondary">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<title>menu</title>
<g fill="#F7F7F7">
<circle cx="04" cy="16" r="3"></circle>
<circle cx="16" cy="16" r="3"></circle>
<circle cx="28" cy="16" r="3"></circle>
</g>
</svg>
</button>
FAQs
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.