gecko-css buttons

by Petr Haluza

HTML

<link rel="stylesheet" href="https://haluzovic.cz/gecko-css/assets/css/reset.css">
<link rel="stylesheet" href="https://haluzovic.cz/gecko-css/assets/css/fonts.css">
<link rel="stylesheet" href="https://haluzovic.cz/gecko-css/assets/css/flex-grid.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">


<h5>Button sizes</h5>

<div class="fl row wrap ai:c jc:l" style="--gap: 1em">

		<button class="btn-r:1-s:sm">
			<span>Button sm</span>
		</button>

		<button class="btn-primary-r:2">
			<span>Button</span>
		</button>

		<a href="#" class="btn-r:2-s:lg">
			<span>Button lg</span>
		</a>

</div><!-- /btn-sizes -->

<hr>

<div class="fl row wrap ai:c jc:l" style="--gap: 1em">

		<button class="btn-blue-r:1-s:sm">
			<span>Button sm</span>
		</button>

		<button class="btn-blue-r:2">
			<span>Button</span>
		</button>

		<a href="#" class="btn-r:2-s:lg">
			<span>Button lg</span>
		</a>

</div><!-- /btn-sizes -->

<hr>

<h5>Button group</h5>

	<div class="btnGroup">

		<button class="btn-r:2">
			<span>Tlačítko</span>
		</button>
		<button class="btn-r:2" disabled>
			<span>Tlačítko dis</span>
		</button>
		<a href="#" class="btn-r:2">
			<span>Tlačítko</span>
			<svg viewBox="0 0 60 60"><use href="#icon-loader"></use></svg>
		</a>

</div><!-- /btnGroup -->
	
<hr>
	
<h5>Button icons</h5>
	
<div class="fl row wrap ai:c jc:l" style="--gap: 1em">

		<button class="btn-blue-r:2">
			<svg viewBox="0 0 60 60"><use href="#icon-car-r"></use></svg>
			<span>Button</span>
		</button>

		<button class="btn-blue-r:2">
			<svg viewBox="0 0 60 60"><use href="#icon-loader"></use></svg>
			<span>Button</span>
			<svg viewBox="0 0 60 60"><use href="#icon-car-r"></use></svg>
		</button>

		<button class="btn-blue-r:2">
			<span>Button</span>
			<svg viewBox="0 0 60...

CSS

/* Buttons for Gecko-css */
/* 2025-2-6 */

:root {
	--c-primary: #ea0000; /* primary theme color */
	--white: #fdfeff;
	--lgray: #eaeff4; /* default btn bg */
	--mgray: #dee3e8; /* default btn border */
	--rgray: #aea3a8; 
	--dgray: #535f6a; /* default btn text */
	--blue: #2563eb;
}

[class*=btn-] { display: inline-flex; align-items: center; position: relative;
	border: 1px solid var(--mgray); background: var(--lgray); color: var(--dgray); 
	text-decoration: none; line-height: 1.25em; 
	cursor: pointer; box-shadow: none; transition: all .1s;
	padding: .75em 1em;

	&:hover {box-shadow:0 10px 10px -10px var(--white) inset}
	&:active { transform: translateY(2px);}

/* colors */
	&[class*=-primary] {	background: var(--c-primary);	color: var(--white); border: 1px solid var(--c-primary);}
	&[class*=-blue] {	background: var(--blue);	color: var(--white); border: 1px solid var(--blue);}

/* sizes s:sm,lg*/
	&[class*=-s\:sm] { padding: .5em .75em; font-size: .9em;}
	&[class*=-s\:md] { }
	&[class*=-s\:lg] { padding: .95em 1.2em; font-size: 1.1em;}

/* radius r:1-4,r */
	&[class*=-r\:1] { border-radius: .25em}
	&[class*=-r\:2] { border-radius: .4em}
	&[class*=-r\:3] { border-radius: .8em}
	&[class*=-r\:4] { border-radius: 1em}
	&[class*=-r\:r] { border-radius: 1000px}

/* buttons with text and icons */
	&:has(svg) {	gap:.5em}
	& > svg {	height: 1em; fill:none}

/* disabled */
	&[disabled] { pointer-events:none; opacity: .6}

}/* / [class*=btn-] */




.btnGroup { display:flex;
	& [class*=btn-] {
		&:first-child { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important}
		&:not(:first-child):not(:last-child) { border-radius: 0}
		&:last-child { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important}
	}
}



/* experimetn s počítáním kliků*/
.countMe[data-clicked]:after { content:attr(data-clicked); position: absolute; left: calc(100% - .4em); top: -.4em; color: currentColor; background: inherit; padding: .25em .5em;...

JavaScript

/* označení kliknutého tlačítka s počítadlem kliků */
$('.countMe').on('click', function() {
  let $element = $(this);
  let clickCount = parseInt($element.attr('data-clicked')) || 0;
  clickCount += 1;
  $element.attr('data-clicked', clickCount);
});
  
	
/* výměna svg v tlačítku po kliku a pro demo po 1s na check */
$('[class*="btn-"]').each(function() {
    $(this).on('click', function() {
        var $this = $(this);
        $this.find('.step3').hide();
        $this.find('.step1').fadeOut(100, function() {
            $this.find('.step2').fadeIn(100, function() {
                setTimeout(function() {
                    $this.find('.step2').fadeOut(100, function() {
                        $this.find('.step3').fadeIn(200);
                    });
                }, 1000); // interval před poslením krokem
            });
        });
    });
});