Border image linear gradient, border radius jako przycisk

Przycisk z zaokrąglonym obramowaniem w kolorze gradientu, stworzony przy użyciu właściwości CSS3.

Border image linear gradient, border radius jako przycisk

Tworzenie przycisków, styl-owanie linków czy obramowań elementów jest podstawowym i powszechnym zagadnieniem stosowanym podczas tworzenia stron internetowych. Wpis pokazuje jak stworzyć zaokrąglony element który posiada obramowanie w kolorze gradientu. Nie możemy tego zrobić za pomocą właściwości: border-image i border-radius gdyż obramowanie nie jest zaokrąglane a ucinane co nie daje pożądanego efektu. Z pomocą przychodzą nam jednak pseudo-elementy, które pozwalają w czytelny i zrozumiały sposób stworzyć szablon HTML i CSS. Poniżej w kilku podpunktach przedstawię w jaki sposób dodać, opisany powyżej, button na stronę.

HTML:

<a class="compsoul-more">
  <span class="compsoul-more__content">Zobacz więcej</span>
</a>

CSS:

.compsoul-more {
  border-radius: 8px;
  color: blue;
  display: inline-block;
  line-height: 0px;
  overflow: hidden;
  position: relative;
  transition: background 0.2s;
}

.compsoul-more:hover {
  background: #ffc000;
}

.compsoul-more:before {
  border: 4px solid transparent;
  border-image: linear-gradient(to right, red, green);
  border-image-slice: 1;
  box-sizing: border-box;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.compsoul-more__content {
  display: inline-block;
  font-size: 18px;
  line-height: 52px;
  overflow: hidden;
  padding: 0px 32px;
  position: relative;
  text-transform: uppercase;
}

.compsoul-more__content:before, .compsoul-more__content:after {
  box-sizing: border-box;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0px;
  width: 10px;
  z-index: 0;
}

.compsoul-more__content:before {
  border: 4px solid red;
  border-radius: 8px 0px 0px 8px;
  border-right: 0px;
  left: 0px;
}

.compsoul-more__content:after {
  border: 4px solid green;
  border-radius: 0px 8px 8px 0px;
  border-left: 0px;
  right: 0px;
}

DEMO:

Zobacz więcej
Gotowe szablony stron www z wdrożeniem!

Dodaj komentarz:

Ciasteczko to mały fragment tekstu, który serwis internetowy wysyła do przeglądarki i który przeglądarka wysyła z powrotem przy następnych wejściach na witrynę. Jest także niezwykle denerwujące i nic nie wnosi do świadomości użytkownika, który nie wie że te same informację mogę zapisać choćby w lokalnym magazynie strony internetowej. Więcej informacji znajduje się na podstronie "Polityka prywatności".