How to make a HTML5 form responsive? - css
I have a form as in the below code ? how can i make it fit to the center of the screen and convert it to be responsive ?
HTML5 Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS3 Search Form</title>
<link href="css/cbdb-search-form.css" type="text/css" rel="stylesheet" media="screen" />
<style type="text/css">
body {
background: #999;
}
</style>
</head>
<body>
<form id="search-form">
<input type="email" />
<input type="submit" value="Login" />
</form>
</body>
</html>
CSS Code
/************************************
CSS 3 SEARCH BY ZEAOS
************************************/
#search-form {
background: #e1e1e1; /* Fallback color for non-css3 browsers */
width: 365px;
/* Gradients */
background: -webkit-gradient( linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225)));
background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%);
/* Rounded Corners */
border-radius: 17px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
/* Shadows */
box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
}
/*** TEXT BOX ***/
input[type="email"]{
background: #fafafa; /* Fallback color for non-css3 browsers */
/* Gradients */
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230)));
background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%);
border: 0;
border-bottom: 1px solid #fff;
border-right: 1px solid rgba(255,255,255,.8);
font-size: 16px;
margin: 4px;
padding: 5px;
width: 250px;
/* Rounded Corners */
border-radius: 17px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
/* Shadows */
box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
-webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
-moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
}
/*** USER IS FOCUSED ON TEXT BOX ***/
input[type="text"]:focus{
outline: none;
background: #fff; /* Fallback color for non-css3 browsers */
/* Gradients */
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(235,235,235)));
background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%);
}
/*** SEARCH BUTTON ***/
input[type="submit"]{
background: #44921f;/* Fallback color for non-css3 browsers */
/* Gradients */
background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(79,188,32)), color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21)));
background: -moz-linear-gradient( center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%, rgb(62,135,28) 88%, rgb(49,114,21) 100%);
border: 0;
color: #eee;
cursor: pointer;
float: right;
font: 16px Arial, Helvetica, sans-serif;
font-weight: bold;
height: 30px;
margin: 4px 4px 0;
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
width: 84px;
outline: none;
/* Rounded Corners */
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
/* Shadows */
box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
-moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2);
-webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
}
/*** SEARCH BUTTON HOVER ***/
input[type="submit"]:hover {
background: #4ea923; /* Fallback color for non-css3 browsers */
/* Gradients */
background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
background: -moz-linear-gradient( center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);
}
input[type="submit"]:active {
background: #4ea923; /* Fallback color for non-css3 browsers */
/* Gradients */
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(89,222,27)),
color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
background: -moz-linear-gradient( center bottom, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);
}
EDIT 1
This is a mobile web application . Users consists of both smart phones and oldest devices.
First at all
Remove HTML DOCTYPE or change it to <!DOCTYPE html>. HTML5 is not based on SGML, and therefore does not require a reference to a DTD.
To center Content
Wrap your form in a DIV
<body>
<div class="modal">
<form id="search-form">
<input type="email" />
<input type="submit" value="Login" />
</form>
</div>
</body>
Then Apply this CSS to center on screen.
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#search-form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
To be Responsive Use CSS Media Query
Media Queries let you apply styles depending on conditions (screen size, screen type, etc) on the screen where you will see the page.
This is only a simple example. I recommend you read about CSS Media Queries.
In this case you set minimum width and height
#media ( max-width :320px) {
.modal {
min-width: 200px;
min-height: 120px;
}
}
#media ( min-width :321px) {
.modal {
min-width: 300px;
min-height: 220px;
}
}
#media ( min-width :640px) {
.modal {
min-width: 480px;
min-height: 320px;
}
}
#media ( min-width :1200px) {
.modal {
min-width: 700px;
min-height: 400px;
}
}
In the other Hand
Have you thought about using bootstrap?
Enjoy!
First of all for making a responsive form or anything like that always give width in %age followed by giving media queries. You can use bootstrap for making your page even better. you can get bootstrap from getbootstrap.com/. The usage and implementation techniques are mentioned there
To center add position:relative to the body
Then you add these rules to the #form to your css:
#search-form{
margin:auto;
position:absolute;
z-index: 30;
top:0;
bottom:0;
left:0;
right:0;
width: 300px; /*variable*/
height: 300px; /*variable*/
}
To center, add
width: 365px;
height:38px;
position:absolute;
top:50%;
margin-top:-19px;
left:50%;
margin-left:-182px;
in #search-form
for responsive, this could be a starting point:
#media all and (max-width:480px) {
#search-form {
width:100%;
margin-left:-50%;
}
input[type="email"]{
width:70%;
}
input[type="submit"]{
width:20%;
}
}
Related
Why are the buttons on my mobile site not proportional?
The buttons on my mobile site are not proportional at all to the screen. I can not figure out why they are so small. A picture is below.
Here is all of the relevant css:
<style type="text/css" media="handheld, only screen and (max-device-width: 700px)">
#onbutton {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
border-radius: 6px;
text-indent:0;
border:1px solid #dcdcdc;
width: 100%;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:50px;
line-height:50px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
}
#onbutton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}
#onbutton:active {
position:relative;
top:1px;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b9b9b9), color-stop(1, #cecece) );
}
#status {
width: 100%;
opacity: 0;
text-align: center;
font-family: sans-serif;
border-width: 1px;
border-style: solid;
border-radius: 6px;
padding-top: 10px;
padding-bottom: 10px;
}
#status.off {
background-color: #ff5353;
border-color: #ff1515;
}
#status.on {
background-color: #9eda97;
border-color: #11ab0c;
}
</style>
And here is the HTML:
<body>
<div id="main">
<input type="button" value="Start computer" id="onbutton"></input>
<br/>
<br/>
<div id="status" class="on" style="opacity:1">Hello</div>
</div>
</body>
Are you looking for the mobile meta viewport tag? <meta name="viewport" content="width=device-width,initial-scale=1.0" />
CSS: "Indentation" in border below active menu item
I've got a simple Bootstrap navbar menu, which works great, but I want to add a little visual indicator to the bottom of the menu div to show which menu item is currently active.
This seems like it should be easy, but particularly notice that the drop shadow needs to move with the indentation - how do we do something like this?
A picture is worth a thousand words, added one below.
EDIT Added Fiddle: http://jsfiddle.net/52VtD/1463/
HTML
<div class="navbar navbar-gradient navbar-static-top">
<div class="container">
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav nav-pills">
<li class="active">
<span class="glyphicon glyphicon-home" />
</li>
<li>
<span class="glyphicon glyphicon-cog" />
</li>
</ul>
</div>
</div>
</div>
CSS
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
/* gradient for main navigation bar */
.navbar-gradient {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
/* drop shadow */
box-shadow: 3px 3px 3px #888888;
}
Here is a solution with a .png image :
FIDDLE
I added this to you css:
li.active{position:relative;}
li.active::after{
content:"";
background: transparent url("http://i41.tinypic.com/29ofuoh.png") no-repeat center center;
background-size: 15px 17px;
height:17px;
width:100%;
position:absolute;
top:43px;
left:0;
}
You could use something like the following. At least if you don't want to use images and don't mind CSS transforms (Other options may include using an image, drawing the thing with CSS backgrounds or SVG maybe.)
demo
.box{
height: 40px;
width: 200px;
position: relative;
box-shadow: 3px 3px 3px #888;
background: #f4f4f4;
}
.box::after{
display: block;
content: " ";
width: 15px;
height: 15px;
background: #fff;
box-shadow: inset 10px 10px 3px -7px #888;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
bottom: -8px;
right: 50px;
}
Probably needs a little more tweaking but here is a 100% CSS solution.
FIDDLE HERE
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.triangle {
margin-top:-7px;
width: 0;
height: 0;
margin-left:31px;
}
.triangle::after {
content:'';
border-bottom: 0;
height: 15px;
width: 15px;
background-color: #fff;
position: absolute;
-webkit-transform: rotate(45deg);
z-index: 2;
box-shadow: inset 2px -4px 9px #888;
}
.triangle-cover {
position:absolute;
margin-top:1px;
margin-left:-7px;
z-index:10;
width: 0;
height: 0;
border-bottom: solid 17px white;
border-left: solid 14px transparent;
border-right: solid 14px transparent;
}
and in each li that you want active (and you might have to use a little JS to insert these elements into the DOM of the li is active...)
<li class="active"><img src="http://icons.iconarchive.com/icons/ampeross/qetto-2/48/settings-icon.png" />
<div class="triangle"><span class="triangle-cover"></span></div>
</li>
Fade out a border with CSS
I have a footer that has a dashed top border like so:
footer
{
border-top:1px dashed #ddd;
color:#999;
}
I was wondering how I would be able to make the dashed line fade out from left to right. Thanks!
There may be a simpler solution, but one is to put a gradient that fades from left to right that covers the border, e.g.
footer:before {
content: "";
background-color: black;
height: 1px;
display: block;
top: -1px;
position: relative;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}
http://jsfiddle.net/tcs6J/1/
You can create this using CSS Gradients. Check here.
To make it as simple as possible, start off by creating two divs:
<div id="borderbox">
<div id="box">
</div>
</div>
We will use the outer box and give it a Gradient Background and then give a white background to the inner div, thus faking the border.
#borderbox {
background-color: #eee; /* fallback color if gradients are not supported */
background-image: -webkit-linear-gradient(to right, #000, #fff); /* For Chrome and Safari */
background-image: -moz-linear-gradient(to right, #000, #fff); /* For old Fx (3.6 to 15) */
background-image: -ms-linear-gradient(to right, #000, #fff); /* For pre-releases of IE 10*/
background-image: -o-linear-gradient(to right, #000, #fff); /* For old Opera (11.1 to 12.0) */
background-image: linear-gradient(to right, #000, #fff); /* Standard syntax; must be last */
width: 500px;
height: 200px;
display: block;
padding: 1px 0 0 0;
opacity: 0.5;
border-top: 1px dashed #ccc;
}
#box { background: #fff; width: 500px; height: 200px; margin-top: -1px; }
Demo: http://jsfiddle.net/XwJEB/1
CSS3 Buttons with icon
I am following this tutorial to create CSS 3 button with Icon. But the problem in this tutorial Icon height depends on font-size. If I increase font-size of text, icon fits well but if I try to reduce the font-size, it doesn't fit well.Image I am using is 40x30
a.button {
background-image: -moz-linear-gradient(top, #ffffff, #dbdbdb);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #ffffff),color-stop(1, #dbdbdb));
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#dbdbdb');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#dbdbdb')";
border: 1px solid #fff;
-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
padding: 5px 5px;
text-decoration: none;
text-shadow: #fff 0 1px 0;
float: left;
margin-right: 15px;
margin-bottom: 15px;
display: block;
color: #597390;
line-height: 38px;
font-size: 15px;
font-weight: bold;
}
a.button:hover {
background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #ffffff),color-stop(1, #eeeeee));
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#eeeeee');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#eeeeee')";
color: #000;
display: block;
}
a.button:active {
background-image: -moz-linear-gradient(top, #dbdbdb, #ffffff);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #dbdbdb),color-stop(1, #ffffff));
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#dbdbdb', EndColorStr='#ffffff');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#dbdbdb', EndColorStr='#ffffff')";
text-shadow: 0px -1px 0 rgba(255, 255, 255, 0.5);
margin-top: 1px;
}
a.button {
border: 1px solid #979797;
}
a.button.icon {
padding-left: 11px;
}
a.button.icon span{
padding-left: 48px;
display: block;
background: url(../img/gmail2.png) no-repeat;
}
Your statement is a little ambiguous and lacks a question, but I'll take a stab.
In this scenario, font-size will always play a small factor, as it will determine the height of the icon. At some point you are going to need to know some details about the button size, but it doesn't have to be affected by font. If you set the button height and the img{ height:100%; } the image will scale to fit the area.
<div id="container">
<h1><img src="http://placedog.com/50/50" alt="" />Button</h1>
</div>
combined with
#container{
border: 2px solid black;
width: 200px;
height: 20px;
}
#container img{
height:100%;
}
Should get you something you close to what you're looking for. I've whipped up a small jsfiddle to demonstrate one way to accomplish this.
It would be helpful if you could share your code.
In the css3 buttons examples of the link you provided, if I decrease font-size and set the following CSS style, works.
span { display: block; }
span is the tag that wraps the text inside the buttons.
Sliding door technique with semi transparent backgrounds?
I'm working on a button with a glossy appearance. The button can have various colors and sizes. This is what i have done so far:
.btn-zen-inverse, .btn-zen-inverse:hover{
color: white;
background:
url("../img/btn_right.png") no-repeat right 0,
url("../img/btn_left.png") no-repeat left 0,
url("../img/btn_center.png") repeat-x 42px 0;
background-color: #273032;
background-size: contain;
line-height: 50px;
margin: 12px 18px 3px 0;
padding: 0;
border: 2px solid white !important;
}
The images referenced are alpha transparent. The idea is to set the color based on the background-color attribute. The image has a few other properties aswell, but those are merely estetic.
This ofcorse renders an image that looks like this!
I would like the center-image to be visible only in the central part of the image. As you can see from my css. This only has to work perectly in the latest version of the big 4 browsers.
This is what I would like it to look like:
One suggesion is to do this with background-gradients. If that is possible, I need to define the background position similairly to the way padding/margin works. Is that possible?
The design contains:
2 borders:
one white
one gradiented,
A background gradient.
and a 1px thick vertical gradient at the very top.
This is as closer as i can get with CSS only.
Note that multiple backgrounds are not supported by IE8. Neither is the following code, but at least you don't need images.
Live demo
HTML:
<a class="button dark" href="#"><span>Prova Zenconomy Gratis</span></a>
CSS:
.button {
display:inline-block;
border:2px solid;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
line-height:40px;
text-decoration:none;
font-family:Helvetica,Arial,sans-serif;
-webkit-box-shadow: 0 0 4px 1px rgba(204, 204, 204, 0.7);
-moz-box-shadow: 0 0 4px 1px rgba(204, 204, 204, 0.7);
box-shadow: 0 0 4px 1px rgba(204, 204, 204, 0.7);
}
.button > span {
padding:0 40px;
display:block;
border:3px solid;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.button.dark {
border-color:#FFF;
color:#FFF;
background:#030303;
}
.button.dark > span {
border-color:#000;
-webkit-box-shadow: inset 0 3px 5px -1px rgba(255,255,255,0.3);
-moz-box-shadow: inset 0 3px 5px -1px rgba(255,255,255,0.3);
box-shadow: inset 0 3px 5px -1px rgba(255,255,255,0.3);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.3)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%);
}
There are 2 classes (.button for the layout and .dark for colors and gradient) so that you can have different types of buttons in your page.
Please check this code as solution to your query.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.btn-zen-inverse, .btn-zen-inverse:hover{
color:#fff;
background:
url("https://lh4.googleusercontent.com/-V_jjGSjquMg/UHPqq7_FfvI/AAAAAAAAA6s/fK5QEHGzC9I/s128/left.png") no-repeat right 0,
url("https://lh4.googleusercontent.com/-V_jjGSjquMg/UHPqq7_FfvI/AAAAAAAAA6s/fK5QEHGzC9I/s128/left.png") no-repeat left 0,
url("https://lh3.googleusercontent.com/-JgxTtVru7R8/UHPqq1RgAII/AAAAAAAAA6o/gmfFayABGfQ/s128/center.png") repeat-x 42px 0;
background-color: #ff09f9;
background-size: contain;
line-height: 50px;
margin: 12px 18px 3px 0;
padding: 0;
border: 2px solid white !important;
text-align:center
}
</style>
</head>
<body>
<div class="btn-zen-inverse">Content</div>
</body>
</html>