filament group inc. || Styling the Button Element with Sliding Doors - The Diigo Meta page

• 23 Nov 12
  

  CSS buttons webdesign design forms technique webdevelopment

• 06 Jun 08
  

  Gary Basham

  Web Stuff

• 29 Feb 08
  

  Chris Newton

  The following technique demonstrates a cross-browser technique for button elements with sliding doors.
  

  css development design inspiration html web 2.0 page

• 22 Feb 08
  

  Arnaud Lecat

  css button web design form

• 16 Feb 08
  

  Glenn M

  buttons css

• 25 Jan 08
  

  a a

  CSS button 角丸 スライディングドア

• 24 Jan 08
  

  Stuart H

  web-dev.css.article web-dev.css.forms

• 16 Jan 08
  

  tomme basso

  submit button

  css

• 08 Jan 08
  

  arpit mathur

  css javascript

• 14 Dec 07
  

  maría rey

  buttons

• 

  ronan Cassin

  css button picture

• 

  Aristide Asprogerakas

  Tutorials Web Tools PHP CSS

• 11 Dec 07
  

  David Sky

  css

• 21 Nov 07
  

  Nick Lewis

  styling forms submit button

  form styling

• 16 Nov 07
  

  Justin Ludington

  css design howto images tutorials

• 25 Oct 07
  

  roxanne sutton

  css buttons webdesign button design forms form html ajax blogs bug code development

• 25 Sep 07
  

  chika nagai

  button css design form from_delicious

• 08 Sep 07
  

  wagner nascimento

  css buttons webdesign button design forms form html

• 04 Sep 07
  

  luke barker

  button submit forms grpahics design style css del

• 03 Sep 07
  

  Aitor R

  css botones formularios

• 30 Aug 07
  

  usingsystem

  css button tutorial

• 23 Aug 07
  

  Burak Emre Kabakcı

  web2.0 graphics button

• 08 Aug 07
  

  Tobias Schoessler

  css

• 06 Aug 07
  

  mickx123

  webdesign css

• 03 Aug 07
  

  Tommy Adkins

  button css sliding door html Web Development

• 01 Aug 07
  

  iannnnn Singhto

  ออกแบบปุ่มเงาวาว ซ้วยสวยด้วย CSS

  button css

• 30 Jul 07
  

  mmankin

  <button value="submit" class="submitBtn"><span>Submit</span></button>

  slidingDoors Buttons button

• 25 Jul 07
  

  ElFede

  css html forms

• 

  theopie

  css webdesign buttons button design forms

• 20 Jul 07
  

  elrrazo

  css buttons forms

• 11 Jul 07
  

  Oren Farhi

  sliding doors example css html

  css css-tools css-tutorials design layout tips style

• 09 Jul 07
  

  Michael Caldwell

  css buttons webdesign webdev form forms

• 

  aka equalium

  css

• 02 Jul 07
  

  css tutorial button 2check import_delicious

• 20 Jun 07
  

  andrearestello

  css buttons button forms tips

• 

  hyperlexic me

  paris

• 19 Jun 07
  

  Jeremy James

  button css design tutorial webdesign

• 18 Jun 07
  

  rui mashita

  image web webdesign

• 17 Jun 07
  

  Rika Y

  buttom css submit

  • Example:

     Submit  

    Markup:

     

    	 <button value="submit" class="submitBtn"><span>Submit</span></button>  

       

    CSS:

     

    	 button {    border:0;    cursor:pointer;    font-weight:bold;    padding:0 20px 0 0;    text-align:center;  } button span {    position:relative;    display:block;    white-space:nowrap;    padding:0 0 0 20px;  }  /*blue buttons*/ button.submitBtn {    background:url(images/btn_blue_right.gif) right no-repeat;    font-size:1.3em;  } button.submitBtn span {    height:50px;    line-height:50px;   background:url(images/btn_blue_left.gif) left no-repeat;   color:#fff;  } button.submitBtn:hover { 	background:url(images/btn_blue_right_hover.gif) right no-repeat;  } button.submitBtn:hover span { 	background:url(images/btn_blue_left_hover.gif) left no-repeat;  } 	 

     

    CSS for IE 6 and 7 (conditionalize as needed):

     

    	 button {    width:auto;    overflow:visible;  } button span {    margin-top:1px;  } 	
• 

  Ilkka Järstä

  webdesign css

• 14 Jun 07
  

  washo ohsaw

  css graphic tips web2.0

• 13 Jun 07
  

  grillo

  code css button

• 11 Jun 07
  

  Simon Keslake

  css webdesign

• 09 Jun 07
  

  adam ghost

  css design

• 04 Jun 07
  

  yuukaa

  webdev webdesign howto button css

• 02 Jun 07
  

  oronmiz

  buttons forms css code

• 01 Jun 07
  

  Jay Kwong

  background:url(images/btn_blue_right.gif) right no-repeat; font-size:1.3em;

  navigation css buttons design layout

• 28 May 07
  

  Alexander Kolov

  webdesign

• 

  snowie

  webdesign button

• 27 May 07
  

  Thorn Vandevelde

  webdevelopment css button form webdesign xhtml image

• 

  emilime

  css style html buttons button design development form forms code

• 26 May 07
  

  alexander rehm

  WebDesign web-development CSS buttons button design forms form

• 24 May 07
  

  Chrys R

  css webdesign

• 

  kanirasta

  css buttons webdesign delicious

• 

  David Murray

  for:royall

• 

  jcassain

  css webdesign

• 

  Eapen G

  css webdesign buttons Design form forms button

• 

  mrg3kko

  buttons form button forms

• 23 May 07
  

  josephhsu

  css design form webdesign

• 08 Dec 06
  

  Luis García

  Stuff

• 05 Jan 89
  

  berkin de Ravin

  css

Would you like to comment?

Join Diigo for a free account, or sign in if you are already a member.