loading

CSS Styled Buttons

Download Code

Created purely with CSS, these web buttons require no image or icon files and are perfect for hi-res display devices. Tested and renders well in IE 10+ and all other browsers.

Use these elements in your project by previewing the HTML code examples and downloading the CSS source files.


Compatible With:

HTML

!DOCTYPE html
html
head
meta charset="UTF-8"
title Page Title /title

Link the buttons CSS stylesheets to your HTML document
link rel="stylesheet" type="text/css" href="sji-buttons-min.css"

This stylesheet is optional
link rel="stylesheet" type="text/css" href="sji-buttons-ul-responsive.css"

/head
body

Create a default gray button
a class="sji-btn" href="#"Button/a

Create a default blue button
a class="sji-btn blue" href="#"Button/a

Create a blue button with rounded ends
a class="sji-btn blue round" href="#"Button/a

Create a glossy blue button with rounded ends
a class="sji-btn glossy blue round" href="#"Button/a

Create buttons with "Previous" and "Next" arrow icons
a class="sji-btn prev" href="#"Previous/a
a class="sji-btn next" href="#"Next/a

Create a glossy blue menu bar with multiple buttons
ul class="sji-btn blue glossy"
  a class="prev" href="#"Back/a
  a href="#"1/a
  a href="#"2/a
  a href="#"3/a
  a class="next" href="#"Next/a
/ul

Create button for info pop-up box
span class="sji-infotip"
  spanSome Information Goes Here.../span
/span

/body
/html

CSS

Javascript

Copyright © 2024 Sean James Interactive

Message Delivered
Successfully!