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

inaktív gombok

Link
html
<a class="btn btn-blue" href="#" role="button" disabled="disabled" aria-label="leíró szöveg">Link</a>
<button class="btn btn-blue" type="submit" disabled="disabled">gomb</button>
<input class="btn btn-blue" type="button" value="gomb" disabled="disabled">
<input class="btn btn-blue" type="submit" value="küldés" disabled="disabled">
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 {
	cursor: not-allowed;
	filter: alpha(opacity=65);
	-webkit-box-shadow: none;
	box-shadow: none;
	opacity: .65;
}

Ű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 class="btn btn-block btn-default btn-md text-uppercase" id="" title="Vissza az előző állapothoz" type="reset">törlés</button>
            <button class="btn btn-block btn-blue btn-md text-uppercase" id="" title="Tovább a következő állapothoz">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;
}