css for button

Questions and tutorials related to Cascading Style Sheets *all versions*

Moderators: macek, egami, gesf

Post Reply
User avatar
southriver
New php-forum User
New php-forum User
Posts: 51
Joined: Sun May 29, 2005 8:31 pm

css for button

Post by southriver » Thu Feb 23, 2006 3:02 am

Can you help me to create a css in the image.

Plz see the image at http://www.writely.com/View.aspx?docid=bds46xkhwzpg

Thanks

Coditor
New php-forum User
New php-forum User
Posts: 243
Joined: Wed Feb 01, 2006 9:18 am
Location: Netherlands
Contact:

Post by Coditor » Thu Feb 23, 2006 4:05 am

I'm not sure what font you used, but this is getting close:

Code: Select all

<html>
<head>
<style>
div.button {
	display: inline;
	border: 1px solid #666;
	width: auto;
}
input.button {
	font-family: Arial;
	font-size: 8px;
	font-weight: bold;
	color: #333333;
	background: #b4c9d3;
	border: 1px solid #fff;
	height: 13px;
	padding: 0;
	margin: 0;
}
</style>
</head>
<body>
<div class="button"><input type="button" class="button" value="Browse" /></div>
</body>
You need to place a div around it because you want to have 2 borders.

Coditor

User avatar
southriver
New php-forum User
New php-forum User
Posts: 51
Joined: Sun May 29, 2005 8:31 pm

Post by southriver » Thu Feb 23, 2006 5:42 pm

OK, thank you very much. :)

User avatar
southriver
New php-forum User
New php-forum User
Posts: 51
Joined: Sun May 29, 2005 8:31 pm

Post by southriver » Thu Feb 23, 2006 6:46 pm

Code: Select all

<html>
<head>
<style>
div.button {
   display: inline;
   border: 1px solid #666666;
   width: auto;
}
input.button {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #333333;
    background: #b4c9d3;
    border: 1px solid #ffffff;
    height: 16px;
    padding: 0;
    margin: 0;
}
</style>
 </head>
 <body>
 <div class="button"><input type="button" class="button" value="More" /></div>
 <br>
 <br>
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><div class="button"><input type="button" class="button" value="More" /></div></td>
    <td></td>
  </tr>
</table>
 </body>
</html>
When i use this css for a button in table, i don't see border top and border bottom. With button out table is exactly.
Plz help me again. :help:
Thks. :)

Coditor
New php-forum User
New php-forum User
Posts: 243
Joined: Wed Feb 01, 2006 9:18 am
Location: Netherlands
Contact:

Post by Coditor » Fri Feb 24, 2006 3:32 am

Try:

Code: Select all

<td height="20"><div class="button"><input type="button" class="button" value="More" /></div></td>
Coditor

johnmacd
New php-forum User
New php-forum User
Posts: 75
Joined: Wed Jun 12, 2013 9:30 pm
Contact:

Re: css for button

Post by johnmacd » Fri Apr 08, 2016 4:29 am

Hi,

Try this for simple button:

.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}

I hope it helps

Post Reply

Who is online

Users browsing this forum: No registered users and 2 guests