COOKIE, SÜTIKEZELÉSA Portál süti (cookie) fájlokat használ, melyeket az Ön gépén tárolja a rendszer. A cookie-k személyek azonosítására nem alkalmasak, szolgáltatásaink biztosításához szükségesek. Az oldal használatával Ön beleegyezik a cookie-k használatába. További információért kérjük, olvassa el Adatvédelmi szabályzatunkat .

HU EN

Gombok

Normál gomb

Link
html
<a class="btn btn-default" href="#" role="button" aria-label="leíró szöveg">Link</a>
<button class="btn btn-default" type="submit">gomb</button>
<input class="btn btn-default" type="button" value="gomb">
<input class="btn btn-default" type="submit" value="küldés">
css
.btn {
	font-weight: 700;
	border-radius: 5px;
	text-transform: uppercase;
	-webkit-transition: opacity 0.5s ease-out;
	transition: opacity 0.5s ease-out;
	font-size: 0.8rem;
}
.btn-default,
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.btn-default:active:hover,
.btn-default:focus:hover {
	border-color: #004b88;
	color: #004b88;
	text-transform: uppercase;
	background-color: transparent;
}
.btn:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	opacity: 0.8;
}

kék gomb

Link
html
<a class="btn btn-blue" href="#" role="button" aria-label="leíró szöveg">Link</a>
<button class="btn btn-blue" type="submit">gomb</button>
<input class="btn btn-blue" type="button" value="gomb">
<input class="btn btn-blue" type="submit" value="küldés">
css
.btn {
	font-weight: 700;
	border-radius: 5px;
	text-transform: uppercase;
	-webkit-transition: opacity 0.5s ease-out;
	transition: opacity 0.5s ease-out;
	font-size: 0.8rem;
}
.btn-blue,
.btn-blue:hover,
.btn-blue:focus,
.btn-blue:active,
.btn-blue.active,
.btn-blue:active:hover,
.btn-blue:focus:hover {
	color: #fff;
	background-color: #004b88;
	border-color: #004b88;
	outline: none;
}
.btn:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	opacity: 0.8;
}

piros gomb

Link
html
<a class="btn btn-red" role="button" href="#" aria-label="leíró szöveg">Link</a>
<button class="btn btn-red" type="submit">gomb</button>
<input class="btn btn-red" type="button" value="gomb">
<input class="btn btn-red" type="submit" value="Küldés">
css
.btn {
  font-weight: 700;
  border-radius: 5px;
  text-transform: uppercase;
  -webkit-transition: background-color 0.5s ease-out, border-color 0.5s ease-out;
  transition: background-color 0.5s ease-out, border-color 0.5s ease-out;
  font-size: 0.8rem;
}

.btn,
.form-control,
button.close {
  -webkit-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
  outline: none;
}

.btn-red {
  background-color: rgba(194, 0, 41, 1);
  color: #fff;
  border: 1px solid rgba(194, 0, 41, 1);
}

.btn-blue:hover,
.btn-red:hover {
  color: #fff;
}

.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn:active:hover,
.btn:focus:hover {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.btn:hover,
.btn:focus {
  text-decoration: underline;
}

.btn.btn-red.active.focus,
.btn.btn-red.active:focus,
.btn.btn-red.focus,
.btn.btn-red:active.focus,
.btn.btn-red:active:focus,
.btn.btn-red:active:focus,
.btn.btn-red:focus,
.btn.btn-blue.active.focus,
.btn.btn-blue.active:focus,
.btn.btn-blue.focus,
.btn.btn-blue:active.focus,
.btn.btn-blue:active:focus,
.btn.btn-blue:focus {
  outline: 1px solid #fbdc00;
  outline-offset: -1px;
  color: #fff;
}

inaktív gombok

Ez a gomb most inaktív

html
<button class="btn btn-blue" type="submit" disabled aria-disabled="true">gomb</button>
<input class="btn btn-blue" type="button" value="gomb" disabled>
<input class="btn btn-blue" type="submit" value="küldés" disabled>
<button class="btn btn-blue" type="button" aria-disabled="true" aria-describedby="accessibilityBtn">akadálymentes gomb</button>
<p class="sr-only" id="accessibilityBtn" aria-live="assertive">Ez a gomb most inaktív</p>
css
.btn {
	font-weight: 700;
	border-radius: 5px;
	text-transform: uppercase;
	-webkit-transition: opacity 0.5s ease-out;
	transition: opacity 0.5s ease-out;
	font-size: 0.8rem;
}
.btn-blue,
.btn-blue:hover,
.btn-blue:focus,
.btn-blue:active,
.btn-blue.active,
.btn-blue:active:hover,
.btn-blue:focus:hover {
	color: #fff;
	background-color: #004b88;
	border-color: #004b88;
	outline: none;
}
.btn:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	opacity: 0.8;
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn,
.btn.disabled:hover,
.btn[disabled]:hover,
a[aria-disabled=true],
button[aria-disabled=true] {
	filter: alpha(opacity=30);
	opacity: 0.3;
	cursor: not-allowed;
	-webkit-box-shadow: none;
	box-shadow: none;
}

Űrlap elküldése és törlése

* Ezt a mezőt kötelező kitölteni

html
<div class="form-group">
    <p><small>* Ezt a mezőt kötelező kitölteni</small></p>
    <hr>
    <div class="btns">
        <div class="btnsCont">
            <button id="" class="btn btn-block btn-default btn-md text-uppercase" aria-label="űrlap törlése" type="reset">törlés</button>
            <button id="" class="btn btn-block btn-blue btn-md text-uppercase" aria-label="űrlap elküldése">küldés</button>
        </div>
    </div>
</div>
css
.form-group {
     margin-bottom: 25px;
}
 main p {
     font-size: 1rem;
}
 hr {
     border-top: 1px solid #ccc;
}
 .btns {
     text-align: right;
     width: 100%;
     margin-bottom: 20px;
}
 .btns .btnsCont {
     width: 100%;
     margin: 0 0 0 auto;
}
 .btns .btn-default.btn-block {
     white-space: normal;
     min-width: 20%;
     max-width: 50%;
     width: auto;
}
 .btns .btn {
     margin-left: 15px;
}
 .btns .btn-block {
     display: inline-block;
     margin: 0;
}
 .btn {
     font-weight: 700;
     border-radius: 5px;
     text-transform: uppercase;
     -webkit-transition: opacity 0.5s ease-out;
     -o-transition: opacity 0.5s ease-out;
     transition: opacity 0.5s ease-out;
     font-size: 0.8rem;
}