BEM Buttons

Developer
Nika Zawila
Size
4,265 Kb
Views
20,240
  1. BEM Buttons Previews
  2. BEM Buttons HTML Codes
  3. BEM Buttons CSS Codes
  4. BEM Buttons JS Codes

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
IQ Test

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
Name
Menu
Modal component with brick menu
Player
Dropdown menu
Dashboard Stats Component
Music player
Mr. Rooster in CSS
Product backlog module
Cashflow app module
Weather widget
Create amazing web 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!