Link to home
Start Free TrialLog in
Avatar of mathieu_cupryk
mathieu_cuprykFlag for Canada

asked on

I need to create another button.

I bought some buttons and I need a LOGOUT button like my LOGIN
Can someone help me with this?

log-in.gif
SOLUTION
Avatar of racmail2001
racmail2001
Flag of Romania image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Just grab one of the gradient styles here:
http://www.dezinerfolio.com/2007/05/06/ultimate-web-20-layer-styles
http://www.dezinerfolio.com/2007/03/14/ultimate-web-20-gradients-free-download
http://www.dezinerfolio.com/2008/11/19/220-amazing-free-photoshop-layer-styles

Now you just have to create a rounded rectangle or with a rectangular marquee make a square and then go to Select > Modify > Smooth > for example radius 3px. And then fill it with white. And apply one of those layer styles or gradients.
And then in the CSS you can use the sliding doors technique in the CSS to use just 2 images, you can slice those up in Photoshop left part is 3px and right part is 197px. Below an example snippet that i have created for the use in Sharepoint
Good luck

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#workflowbutton {
	font:bold 11px Tahoma, Arial, Helvetica;
	margin:0px;
	padding:0px;
	display: block;
	width:100%;
}
 
#workflowbutton ul {
	float:left;
	width:480px;
	line-height:32px;
	list-style:none;
	margin:0;
	padding:0 15px 0 0px;
}
 
#workflowbutton li {
	display:inline;
	padding:0;
}
 
#workflowbutton li img {
	padding-right:5px;
	vertical-align:middle;
	border:none;
}
 
#workflowbutton a {
	color:#436ed5; /* need because it will use default link color */
	float:left;
	padding:0 3px 0 3px; /* left 3 px because of left.png image */
	text-decoration:none;
	background: url(images/left.png) no-repeat left center;
}
 
#workflowbutton a span {
	display:block;
	float:none;
	padding:0 10px 0 7px;
	background:url(images/right.png) no-repeat right center;
}
 
#workflowbutton a:hover {
	background: url(images/left-hover.png) no-repeat left center;
}
 
#workflowbutton a:hover span {
	background:url(images/right-hover.png) no-repeat right center;
	color:#1542ad;
}
</style>
</head>
<body>
<div id="workflowbutton">
  <ul>
    <li><a href="#" title="Cancelled"><span><img src="images/icons/cancelled.png" width="16" height="16">Cancelled</span></a> </li>
    <li><a href="#" title="Completed"><span><img src="images/icons/completed.png" width="16" height="16">Completed</span></a></li>
    <li><a href="#" title="Expired"><span><img src="images/icons/expired.png" width="16" height="16">Expired</span></a></li>
    <li><a href="#" title="Expiring"><span><img src="images/icons/expiring.png" width="16" height="16">Expiring</span></a></li>
    <li><a href="#" title="Fualting"><span><img src="images/icons/faulting.png" width="16" height="16">Faulting</span></a></li>
    <li><a href="#" title="Has New Events"><span><img src="images/icons/hasnewevents.png" width="16" height="16">Has New Events</span></a></li>
    <li><a href="#" title="Locked"><span><img src="images/icons/locked.png" width="16" height="16">Locked</span></a></li>
    <li><a href="#" title="Not Started"><span><img src="images/icons/notstarted.png" width="16" height="16">Not Started</span></a></li>
    <li><a href="#" title="Running"><span><img src="images/icons/running.png" width="16" height="16">Running</span></a></li>
    <li><a href="#" title="Suspended"><span><img src="images/icons/suspended.png" width="16" height="16">Suspended</span></a></li>
    <li><a href="#" title="Terminated"><span><img src="images/icons/terminated.png" width="16" height="16">Terminated</span></a></li>
    <li><a href="#" title="Edit Workflow"><span><img src="images/icons/edit.png" width="16" height="16">Edit Workflow</span></a></li>
    <li><a href="#" title="Start Workflow"><span><img src="images/icons/start.png" width="16" height="16">Start Workflow</span></a></li>
    <li><a href="#" title="Delete Workflow"><span><img src="images/icons/delete.png" width="16" height="16">Delete Workflow</span></a></li>
    <li><a href="#" title="View Workflow"><span><img src="images/icons/workflow.png" width="16" height="16">View Workflow</span></a></li>
    <li><a href="#"title="Add Workflow"><span><img src="images/icons/add.png" width="16" height="16">Add Workflow</span></a></li>
  </ul>
</div>
</body>
</html>

Open in new window

images.zip
This is how your image would be sliced:
buttonslice.jpg
Avatar of mathieu_cupryk

ASKER

I like the way u set this up. It is clean let me try it out tonight. I am just diappointed that I purchased buttons and now I have to create them
I tried it out I get the following image.

Something is wrong.
workflow.png
Something is missing Is this what it should look like.

somethingmissing.png
Do you have the HTML and CSS for your website so i can check if there's an error.
Something seems wrong with the right.png image?
PlEASE CAN U CHECK TO SEE IF IT IS CORRECT.

THANKS.
ALSO SHOULDIT BE A CLASS OR ID?

#workflowbutton li img {
      padding-right:5px;
      vertical-align:middle;
      border:none;
}
 
#workflowbutton a {
      color:#436ed5; /* need because it will use default link color */
      float:left;
      padding:0 3px 0 3px; /* left 3 px because of left.png image */
      text-decoration:none;
      background: url(../../Images/Buttons/left.png) no-repeat left center;
}
 
#workflowbutton a span {
      display:block;
      float:none;
      padding:0 10px 0 7px;
      background:url(.../../Images/Buttons/right.png) no-repeat right center;
}
 
#workflowbutton a:hover {
      background: url(../../Images/Buttons/left-hover.png) no-repeat left center;
}
 
#workflowbutton a:hover span {
      background: url(../../Images/Buttons/right-hover.png) no-repeat right center;
      color:#1542ad;
}


In firefox:
http://localhost:50410/App_Themes/OmegaLove/StyleButton.css
 
#workflowbutton a span (line 76)
 
{
 
display: block;
 
float: none;
 
padding-top: 0pt;
 
padding-right: 10px;
 
padding-bottom: 0pt;
 
padding-left: 7px;
 
background-color: transparent;
 
background-image: url(.../../Images/Buttons/right.png);
 
background-repeat: no-repeat;
 
background-attachment: scroll;
 
background-position: right center;
 
}
 
#workflowbutton a:hover span (line 87)
 
{
 
background-color: transparent;
 
background-image: url(../../Images/Buttons/right-hover.png);
 
background-repeat: no-repeat;
 
background-attachment: scroll;
 
background-position: right center;
 
color: #1542ad;
 
}
---------------------------------------------------------------------------
http://localhost:50410/App_Themes/OmegaLove/StyleBase.css
 
a (line 33)
 
{
 
color: #3a3a3a;
 
text-decoration: none;
 
}
 
a:hover (line 38)
 
{
 
color: #ff9933;
 
text-decoration: none;
 
}
http://localhost:50410/App_Themes/OmegaLove/StyleSheet.css
 
a:link (line 166)
 
{
 
text-decoration: none;
 
}
 
a:hover (line 176)
 
{
 
text-decoration: underline;
 
}
http://localhost:50410/App_Themes/OmegaLove/StyleButton.css
 
#workflowbutton a (line 68)
 
{
 
color: #436ed5;
 
float: left;
 
padding-top: 0pt;
 
padding-right: 3px;
 
padding-bottom: 0pt;
 
padding-left: 3px;
 
text-decoration: none;
 
background-color: transparent;
 
background-image: url(../../Images/Buttons/left.png);
 
background-repeat: no-repeat;
 
background-attachment: scroll;
 
background-position: left center;
 
}
 
#workflowbutton a:hover (line 83)
 
{
 
background-color: transparent;
 
background-image: url(../../Images/Buttons/left-hover.png);
 
background-repeat: no-repeat;
 
background-attachment: scroll;
 
background-position: left center;
 
}

Open in new window

Can u pleasehelp me build the logout button
Don't you have the PSD file of that login button or did you only bought the GIF file.
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I only bought the gifs. I will try the other method. Thank you for understanding. It is tough to be alone and programming.
Did you tried my above code i have also added a link for you with the Photoshop PSD file? If my respond takes a little longer, i'm on a holiday :)
i was sick all week. I am working on it today. sorry for the delay
Hi there, I have tried everything out. I looked at everything you sent me. I appreciate it.
I need to create a logout button with the arrow similar to th login.

log-in.gif
Ok i will create a example for you again but usually in need that PSD file for that button i will try to recreate it. Because using ours will be crap :) when copy/slicen and pasting.
I join mediafire. This is great. I will be waiting for the button. I think the attributes are Arial 13pt.
Bold  Strong for the text.
Thanks.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial