UI-Element, navigation, function, submit
Small but versatile. 28 icons in a tiny iconfont (~2k) combined with a pill-shape. You just need to assign the .but class and the respective icon-class .ic-… to a <button>.
By adding the .right class the icon switches to the right, and if you omit the button (text) content you get a round dot with just the icon in it. (Don‘t use the .right class on the dot variant.)
Since these dots become technically images, it is a good idea to have a title-tag at hand. And you can, of course, choose something totally different for fore- and background colors or even the border-radius in case you‘re not interested in pill-shaped buttons.
Please don‘t wrap <buttons> in <a> tags and use onclick="location.href='target.html';" instead. You can use regular <a> tags with the same classes as buttons, they should look the same.
<button class="but size-s">
<button class="but …">
<button class="but size-l">
<button class="but ic-down">
down
</button>
<button class="but primary ic-down" title="down"></button>
<button class="but ic-down right">
down
</button>
<button class="but …">
<button class="but primary">
<button class="but sharp">
<button class="but transp-k">
<button class="but transp-w">
Disclaimer: Everything here is free to use, but no responsibility is taken for any outcome. Questions & Suggestions: ak at alexkoch dot net (you‘re not a robot, I know). And I don‘t use cookies. Version history