Kontakt

Christina Riedl

Telefon: 07223 967-326

Telefax: 07223 967-7326

E-Mail: christina.riedl@schoeck.de

Nadine Seifried

Telefon: 07223 967-128

Telefax: 07223 967-7128

E-Mail: nadine.seifried@schoeck.de

Navigationselemente Buttons

Buttons heben sich durch die Darstellung von gewöhnlichen Links ab, dadurch wird die Aufmerksamkeit auf diesen gelenkt. Meist werden Buttons für einen Call-to-Action verwendet.

Verwendung

Heller Button (Ghost Button): Zur besonderen Hervorhebung von internen Verlinkungen bei bestimmten Elementen, z.B. "Zu den Stellenangeboten", zur Verlinkung auf externe Webtools von Schöck (z.B. Wärmebrücken-Rechner) oder zum Zurücksetzen von Filtereinstellungen oder getroffenen Auswahlen (z.B. Eventfinder, Detailcenter).

Blauer Button: Wird verwendet wenn sich eine konkrete Aktion dahinter verbirgt, z.B. das Absenden eines Formulars, das Durchführen einer Berechnung oder das Nachladen von weiteren Einträgen.

Hinweis

Der Text im Button soll klar aussagen, was beim Klick ausgelöst wird

Vorschau

HTML

                
                  <div>
  <a href="#" target="_self" class="btn btn-primary">Button Blau</a>
</div>
<br/>
<div>
  <a href="#" target="_self" class="btn btn-light">Button Weiß</a>
</div>

CSS

              .btn {
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  font-size: 15px;
  font-size: .9375rem;
  font-weight: normal;
  line-height: 17px;
  line-height: 1.0625rem;
  margin-bottom: 0;
  padding: 12px 20px;
  position: relative;
  text-align: center;
  top: 0;
  transition: .2s top ease;
  vertical-align: middle;
  white-space: nowrap;
  touch-action: manipulation;
  user-select: none;
}
.btn:hover, .btn:focus {
  color: #333;
  text-decoration: none;
}
.btn:active {
  background-image: none;
  box-shadow: none;
  top: 1px;
}

.btn-primary {
  background-color: #0069b4;
  border-color: #005a9b;
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #004b81;
  border-color: #00365d;
  color: #fff;
}
.btn-primary:active {
  background-image: none;
}

.btn-primary {
  background-color: #0069b4;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNjliNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzODdjMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==");
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #0069b4), color-stop(100%, #3387c3));
  background-image: -moz-linear-gradient(bottom, #0069b4, #3387c3);
  background-image: -webkit-linear-gradient(bottom, #0069b4, #3387c3);
  background-image: linear-gradient(to top, #0069b4, #3387c3);
  background-size: 100%;
  border: none;
  box-shadow: inset 0 -3px rgba(0, 0, 0, 0.3);
  transition: .2s top ease, .2s box-shadow ease;
}
.btn-primary:active {
  background-color: #0069b4;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNjliNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzODdjMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==");
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #0069b4), color-stop(100%, #3387c3));
  background-image: -moz-linear-gradient(bottom, #0069b4, #3387c3);
  background-image: -webkit-linear-gradient(bottom, #0069b4, #3387c3);
  background-image: linear-gradient(to top, #0069b4, #3387c3);
  background-size: 100%;
}

.btn-light {
  background-color: #fff;
  border: solid 1px #e6e6e6;
  box-shadow: 0 2px rgba(0, 0, 0, 0.05);
  color: #0069b4;
  padding: 11px 20px;
  transition: .2s color ease, .2s top ease, .2s box-shadow ease;
}
.btn-light:hover {
  color: #f9b200;
}
.btn-light:focus {
  color: #0069b4;
}
.btn-light:focus:hover {
  color: #f9b200;
}

@media screen and (max-width: 767px) {
  .btn-light {
    transition: .2s top ease, .2s box-shadow ease;
  }
}

SCSS

              .btn {
  background-image:none;
  border:1px solid transparent;
  border-radius:4px;
  cursor:pointer;
  display:inline-block;
  font-size:15px;
  font-size:.9375rem;
  font-weight:normal;
  line-height:17px;
  line-height:1.0625rem;
  margin-bottom:0;
  padding:12px 20px;
  position:relative;
  text-align:center;
  top:0;
  transition:.2s top ease;
  vertical-align:middle;
  white-space:nowrap;
  touch-action:manipulation;
  user-select:none;

  &:hover,
  &:focus {
    color:#333;
    text-decoration:none;
  }

  &:active {
    background-image:none;
    box-shadow:none;
    top:1px;
  }
}

.btn-primary {
  background-color:#0069b4;
  border-color:#005a9b;
  color:#fff;

  &:hover,
  &:focus,
  &:active {
    background-color:#004b81;
    border-color:#00365d;
    color:#fff;
  }

  &:active {
    background-image:none;
  }
}

.btn-primary {
  background-color:#0069b4;
  background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNjliNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzODdjMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-image:-webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #0069b4), color-stop(100%, #3387c3));
  background-image:-moz-linear-gradient(bottom, #0069b4, #3387c3);
  background-image:-webkit-linear-gradient(bottom, #0069b4, #3387c3);
  background-image:linear-gradient(to top, #0069b4, #3387c3);
  background-size:100%;
  border:none;
  box-shadow:inset 0 -3px rgba(0, 0, 0, 0.3);
  transition:.2s top ease, .2s box-shadow ease;

  &:active {
    background-color:#0069b4;
    background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNjliNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzODdjMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-image:-webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #0069b4), color-stop(100%, #3387c3));
    background-image:-moz-linear-gradient(bottom, #0069b4, #3387c3);
    background-image:-webkit-linear-gradient(bottom, #0069b4, #3387c3);
    background-image:linear-gradient(to top, #0069b4, #3387c3);
    background-size:100%;
  }
}

.btn-light {
  background-color:#fff;
  border:solid 1px #e6e6e6;
  box-shadow:0 2px rgba(0, 0, 0, 0.05);
  color:#0069b4;
  padding:11px 20px;
  transition:.2s color ease, .2s top ease, .2s box-shadow ease;

  &:hover {
    color:#f9b200;
  }

  &:focus {
    color:#0069b4;

    &:hover {
      color:#f9b200
    }
  }
}

@media screen and (max-width:767px) {
  .btn-light {
    transition:.2s top ease, .2s box-shadow ease;
  }
}