FlexFlashFast - Buttons

by Yure Pereira

HTML

<form>
  <input type="button" class="btn-super-small" value="Button super small">
  <input type="button" class="btn-small" value="Button small (Default)">
  <input type="button" class="btn-medium" value="Button medium">
  <input type="button" class="btn-great" value="Button great">
</form>

<form>
  <input type="button" class="btn-super-small btn-blue" value="Button super small">
  <input type="button" class="btn-small btn-blue" value="Button small (Default)">
  <input type="button" class="btn-medium btn-blue" value="Button medium">
  <input type="button" class="btn-great btn-blue" value="Button great">
</form>

<form>
  <input type="button" class="btn-super-small btn-red" value="Button super small">
  <input type="button" class="btn-small btn-red" value="Button small (Default)">
  <input type="button" class="btn-medium btn-red" value="Button medium">
  <input type="button" class="btn-great btn-red" value="Button great">
</form>

<form>
  <input type="button" class="btn-super-small btn-yellow" value="Button super small">
  <input type="button" class="btn-small btn-yellow" value="Button small (Default)">
  <input type="button" class="btn-medium btn-yellow" value="Button medium">
  <input type="button" class="btn-great btn-yellow" value="Button great">
</form>

<form>
  <input type="button" class="btn-super-small btn-green" value="Button super small">
  <input type="button" class="btn-small btn-green" value="Button small (Default)">
  <input type="button" class="btn-medium btn-green" value="Button medium">
  <input type="button" class="btn-great btn-green" value="Button great">
</form>

<form>
  <input type="button" class="btn-super-small btn-gray" value="Button super small">
  <input type="button" class="btn-small btn-gray" value="Button small (Default)">
  <input type="button" class="btn-medium btn-gray" value="Button medium">
  <input type="button" class="btn-great btn-gray" value="Button great">
</form>
<hr>
<h2>Types Buttons</h2>
<h3>Button Square</h3>
<form>
...

SCSS

/* Buttons */

//Buttons colors
//Color default
$colorDefault: transparent;
$colorDefaultHover: transparent;
$colorDefaultActive: transparent;
$colorDefaultFocus: transparent;
$colorDefaultBorder: #ababab;
$colorDefaultBorderHover: #9c9c9c;
$colorDefaultBorderActive: #d5d5d5;
$colorDefaultBorderFocus: #969696;

//Color blue
$colorBlue: #4d8ab3;
$colorBlueHover: #467b9f;
$colorBlueActive: #417090;
$colorBlueFocus: #446A84;
$colorBlueBorder: #3f6784;
$colorBlueBorderHover: #385b74;
$colorBlueBorderActive: #365469;
$colorBlueBorderFocus: #334D5F;

//Color Red
$colorRed: #e33d3d;
$colorRedHover: #d54747;
$colorRedActive: #d24c4c;
$colorRedFocus: #ce5151;
$colorRedBorder: #cf5252;
$colorRedBorderHover: #bf5757;
$colorRedBorderActive: #b04d4d;
$colorRedBorderFocus: #a55050;

//Color Yellow
$textColorYellow: #727435;
$colorYellow: #F7FB34;
$colorYellowHover: #EEF23B;
$colorYellowActive: #E0E440;
$colorYellowFocus: #D9DD50;
$colorYellowBorder: #C8CB3F;
$colorYellowBorderHover: #385b74;
$colorYellowBorderActive: #365469;
$colorYellowBorderFocus: #334D5F;

//Color Green
$colorGreen: #4ece4e;
$colorGreenHover: #54c554;
$colorGreenActive: #54b654;
$colorGreenFocus: #5bbc5b;
$colorGreenBorder: #5bbc5b;
$colorGreenBorderHover: #62b462;
$colorGreenBorderActive: #69ae69;
$colorGreenBorderFocus: #6ba86b;

//Color Gray
$colorTextGray: #5a5a5a;
$colorGray: #f0f0f0;
$colorGrayHover: #dedede;
$colorGrayActive: #d5d5d5;
$colorGrayFocus: #cfcfcf;
$colorGrayBorder: #ababab;
$colorGrayBorderHover: #9c9c9c;
$colorGrayBorderActive: #d5d5d5;
$colorGrayBorderFocus: #969696;

.btn-super-small,
.btn-small,
.btn-medium,
.btn-great {
	border: none;
	border-radius: 3px;
	outline: none;
	cursor: pointer;
	border: 1px solid #cecece;
	text-align: center;
	white-space: nowrap;
	display: inline-block;
	margin: 1px auto;
  color: #535353;
  background-color: $colorDefault;
  
  &:hover {
    background-color: $colorDefaultHover;
    border-color: $colorDefaultBorder; 
  }
  
  &:active {
	 ...

JavaScript

[email protected]:YurePereiraWY/weyes-code-v2.git