BEM Buttons

Developer
Size
4,265 Kb
Views
20,240

How do I make an bem buttons?

Buttons scaffold written in a BEM-friendly way.Code also available at https://github.com/nikazawila/bem-buttons. What is a bem buttons? How do you make a bem buttons? This script and codes were developed by Nika Zawila on 15 October 2022, Saturday.

BEM Buttons Previews

BEM Buttons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>BEM Buttons</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="header"> <h1 class="header__title">BEM Buttons</h1> <h2 class="header__subtitle">Buttons scaffold written in a BEM-friendly way.</h2> <div class="header__body"> <a class="github-button" href="https://github.com/nikazawila/bem-buttons" data-style="mega" data-count-href="/nikazawila/bem-buttons/stargazers" data-count-api="/repos/nikazawila/bem-buttons#stargazers_count">Star</a> <a class="github-button" href="https://github.com/nikazawila/bem-buttons" data-icon="octicon-git-branch" data-style="mega" data-count-href="/nikazawila/bem-buttons/network" data-count-api="/repos/nikazawila/bem-buttons#forks_count">Fork</a> <a class="github-button" href="https://github.com/nikazawila/bem-buttons/archive/master.zip" data-icon="octicon-cloud-download" data-style="mega">Download</a> </div>
</header>
<div class="panel"> <div class="panel__header"> <h2 class="panel__title">Base Button</h2> </div> <div class="panel__body"> <a href="#" class="btn">Button</a> </div> <div class="panel__footer"> <script src="https://gist.github.com/nikazawila/4b80d7ff34dca386c83f.js"></script> </div>
</div>
<div class="panel"> <div class="panel__header"> <h2 class="panel__title">States</h2> </div> <div class="panel__body"> <a href="#" class="btn">Normal</a> <a href="#" class="btn is-disabled">Disabled</a> </div> <div class="panel__footer"> <script src="https://gist.github.com/nikazawila/2b1ad61ae5383e5bdc6e.js"></script> </div>
</div>
<div class="panel"> <div class="panel__header"> <h2 class="panel__title">Buttons' Variants</h2> </div> <div class="panel__body"> <a href="#" class="btn">Button</a> <a href="#" class="btn btn--primary">Button</a> <a href="#" class="btn btn--secondary">Button</a> <a href="#" class="btn btn--tertiary">Button</a> </div> <div class="panel__footer"> <script src="https://gist.github.com/nikazawila/193ddd7c7878fa1ddf41.js"></script> </div>
</div>
<div class="panel panel--flush"> <div class="panel__header"> <h2 class="panel__title">Buttons' Sizes</h2> </div> <div class="panel__body"> <div class="panel__body-item"> <a href="#" class="btn btn--small">Button</a> <a href="#" class="btn btn--small btn--primary">Button</a> <a href="#" class="btn btn--small btn--secondary">Button</a> <a href="#" class="btn btn--small btn--tertiary">Button</a> </div> <div class="panel__body-item"> <a href="#" class="btn btn--large">Button</a> <a href="#" class="btn btn--large btn--primary">Button</a> <a href="#" class="btn btn--large btn--secondary">Button</a> <a href="#" class="btn btn--large btn--tertiary">Button</a> </div> </div> <div class="panel__footer"> <script src="https://gist.github.com/nikazawila/612dbf7ea75067976da2.js"></script> </div>
</div>
<div class="panel panel--flush"> <div class="panel__header"> <h2 class="panel__title">Buttons' Bordered</h2> </div> <div class="panel__body"> <div class="panel__body-item"> <a href="#" class="btn btn--bordered-base btn--small">Button</a> <a href="#" class="btn btn--bordered-primary btn--small">Button</a> <a href="#" class="btn btn--bordered-secondary btn--small">Button</a> <a href="#" class="btn btn--bordered-tertiary btn--small">Button</a> </div> <div class="panel__body-item"> <a href="#" class="btn btn--bordered-base">Button</a> <a href="#" class="btn btn--bordered-primary">Button</a> <a href="#" class="btn btn--bordered-secondary">Button</a> <a href="#" class="btn btn--bordered-tertiary">Button</a> </div> <div class="panel__body-item"> <a href="#" class="btn btn--bordered-base btn--large">Button</a> <a href="#" class="btn btn--bordered-primary btn--large">Button</a> <a href="#" class="btn btn--bordered-secondary btn--large">Button</a> <a href="#" class="btn btn--bordered-tertiary btn--large">Button</a> </div> </div> <div class="panel__footer"> <script src="https://gist.github.com/nikazawila/71eb38cbaa71cc80c8bc.js"></script> </div>
</div>
<footer class="footer"> <p>Copyright &copy; 2014 <a href="http://nikazawila.com" target="_blank">Nika Zawila</a></p>
</footer>
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script> <script src="js/index.js"></script>
</body>
</html>

BEM Buttons - Script Codes CSS Codes

body { font: 16px "Helvetica Neue", Helvetica, sans-serif; background: #F9FBFF; color: #666;
}
.gist .gist-file { margin-bottom: 0 !important;
}
.gist .line-data { text-align: left;
}
a { color: #000;
}
.footer { margin: 0 auto; width: 600px; text-align: center; padding: 0 0 30px 0; font-size: 12px;
}
.header { text-align: center; width: 600px; margin: 0 auto; padding: 50px 0; font-weight: 200;
}
.header__title { font-size: 50px; color: #333;
}
.header__subtitle { font-size: 20px; padding-bottom: 20px;
}
.panel { width: 600px; background: #fff; margin: 0 auto; margin-bottom: 50px; border-radius: 10px; text-align: center;
}
.panel__header, .panel__body, .panel__body-item, .panel__footer { padding: 20px;
}
.panel__header { border-bottom: 2px solid #F9FBFF;
}
.panel__title { font-size: 24px; font-weight: 100;
}
.panel__body-item { border-bottom: 2px solid #F9FBFF;
}
.panel__body-item:last-child { border-bottom: none;
}
.panel--flush .panel__body { padding: 0;
}
.btn { color: #fff; background-color: #aec0e3; padding: 0.75em 1em; display: inline-block; text-decoration: none; border-radius: 4px; font: 16px "Helvetica Neue", Helvetica, sans-serif; border: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.btn:hover { background-color: #c1cfea;
}
.btn.is-disabled { background-color: #ccc; cursor: not-allowed;
}
.btn--small { font-size: 12px;
}
.btn--large { font-size: 20px;
}
.btn--primary { background-color: #496EE8;
}
.btn--primary:hover { background-color: #6080eb;
}
.btn--secondary { background-color: #20c77f;
}
.btn--secondary:hover { background-color: #25dc8d;
}
.btn--tertiary { background-color: #e84949;
}
.btn--tertiary:hover { background-color: #eb6060;
}
.btn--bordered-base { background: #fff; border: 1px solid #aec0e3; color: #aec0e3;
}
.btn--bordered-base:hover { background: #fff; color: #88a3d6; border-color: #88a3d6;
}
.btn--bordered-primary { background: #fff; border: 1px solid #496EE8; color: #496EE8;
}
.btn--bordered-primary:hover { background: #fff; color: #1c4ae2; border-color: #1c4ae2;
}
.btn--bordered-secondary { background: #fff; border: 1px solid #20c77f; color: #20c77f;
}
.btn--bordered-secondary:hover { background: #fff; color: #199b63; border-color: #199b63;
}
.btn--bordered-tertiary { background: #fff; border: 1px solid #e84949; color: #e84949;
}
.btn--bordered-tertiary:hover { background: #fff; color: #e21c1c; border-color: #e21c1c;
}

BEM Buttons - Script Codes JS Codes

// BEM Buttons
// Buttons scaffold written in a BEM-friendly way.
//
// Code available at https://github.com/nikazawila/bem-buttons
//
// Author: Nika Zawila - http://nikazawila.com
BEM Buttons - Script Codes
BEM Buttons - Script Codes
Home Page Home
Developer Nika Zawila
Username nikazawila
Uploaded October 15, 2022
Rating 4.5
Size 4,265 Kb
Views 20,240
Do you need developer help for BEM Buttons?

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!

Nika Zawila (nikazawila) Script Codes
Create amazing SEO content 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!