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
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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">
<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">
<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
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.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;
}
.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; }
.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
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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">
<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">
<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
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.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 { 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 {
	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
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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">
<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">
<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
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.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;
}
.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; }
.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
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.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;
}
.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; }
.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
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.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;
}
.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; }
.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;
}