Kako ustvarimo gumb, ki ima prekinjeno obrobo

Med pregledovanjem spleta sem naletel na zanimiv primer, gumb, ki je imel prekinjeno obrobo. Rezultat je bil enak gumbu na sliki, avtor pa je to rešil s pomočjo JavaScripta in CSSja. Izbrana rešitev mi ni bila najbolj všeč, zato sem se lotil rešitve, ki uporabi samo CSS.

Za rešitev tega problema sem uporabil CSS selector ::before in ::after s katerima sem ustvaril prekinitev in jo ustrezno pozicioniral. Gumb je imel definirano višino in širino na podlagi katere sem na novo ustvarjene elemente s CSS značko position:absolute in koordinatami ustrezno postavil na svoje mesto.

Gumb s prekinjeno obrobo – Broken border buttom

Rešitev deluje v vseh brskalnikih, tudi Internet Explorer.

Oznake: broken borderbuttonCSS

Komentiraj


*