Adjusting fixed width to div and creating effect on css button click - css

Question

I have used div event which appear with scrollbar on the page to show content.
Though I have adjusted the width of div, When it appears on the page; it reaches to right corner of the screen.
code:
<div id="txtHint" align="justify" style="z-index: 1; color:green; left: 350px; top: 270px; position: absolute; margin-top: 0px; width:500px;height:250px;overflow:auto;">
Height gets adjusted correctly, for width whatever I take i.e. 200,300, or 800px. It spans up right end.
I checked in mozilla and chrome both. I am testing it for my ec2 amazon instance.
Similarly my css button :
<input class="uibutton confirm large" type="submit" value="Connect with facebook" onclick="AjaxResponse()" >
When I click it, all actions performed correctly but it does not show any effect so that user can realize whether button is clicked or not.
Can someone tell me effect which can be realized on click event. I tried on google with css button click effect and tested someof them. But does not make any difference.
Here is css for this:
.uibutton,
.uibutton:visited {
position: relative;
z-index: 1;
overflow: visible;
display: inline-block;
padding: 0.5em 0.8em 0.5em;
border: 1px solid #999;
border-bottom-color: #888;
margin: 0;
text-decoration: none;
text-align: center;
font: bold 13px/normal 'lucida grande', tahoma, verdana, arial, sans-serif;
white-space: nowrap;
cursor: pointer;
/* outline: none; */
color: #333;
background-color: #eee;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f6f6), to(#e4e4e3));
background-image: -moz-linear-gradient(#f5f6f6, #e4e4e3);
background-image: -o-linear-gradient(#f5f6f6, #e4e4e3);
background-image: linear-gradient(#f5f6f6, #e4e4e3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f6f6', EndColorStr='#e4e4e3'); /* for IE 6 - 9 */
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
/* IE hacks */
zoom: 1;
*display: inline;
}
.uibutton:hover,
.uibutton:focus,
.uibutton:active {
border-color: #777 #777 #666;
}
.uibutton:active {
border-color: #aaa;
background: #ddd;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* overrides extra padding on button elements in Firefox */
.uibutton::-moz-focus-inner {
padding: 2.0px;
border: 0;
}
.uibutton.large {
font-size: 16px;
}
/* ............................................................................................................. Submit, etc */
.uibutton.confirm {
border-color: #29447e #29447e #1a356e;
color: #fff;
background-color: #5B74A8;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#637bad), to(#5872a7));
background-image: -moz-linear-gradient(#637bad, #5872a7);
background-image: -o-linear-gradient(#637bad, #5872a7);
background-image: linear-gradient(#637bad, #5872a7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#637bad', EndColorStr='#5872a7'); /* for IE 6 - 9 */
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
}
.uibutton.confirm:active {
border-color: #29447E;
background: #4F6AA3;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

Answer 1

Sounds a lot like you need css click events. This can be achieved with a simple checkbox.
Here is a link demonstrating it:
http://tympanus.net/Tutorials/CSSClickEvents/index.html
http://jsfiddle.net/Hive7/gd7AJ/
Edit
To do the current element you give the class of css effect to the current element
Edit
Also if you want to make the clicked element change you need to put the checkbox before
Here is a fiddle demo of both:
http://jsfiddle.net/Hive7/gd7AJ/1/