Find out more Click here for more Click Click Click Click
/* Base Button Styles
* @author Oran Blackwell */
.button {
background-color : #bfc5cc;
color : #fff;
cursor : pointer;
display : inline-block;
overflow : visible;
padding : 6px 24px;
margin : 0;
text-decoration : none;
font-family : 'Open Sans', verdana, sans-serif;
font-size : 1em;
/**/
-moz-border-radius : 0.2em; /* Firefox 1 - 3.6 */
-webkit-border-radius : 0.2em; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
border-radius : 0.2em; /* Opera 10.5, IE 9+, Safari 5+, Chrome, Firefox 4+, iOS 4+, Android 2.1+ */
}
/* Standard Button Sizes */
.button.buttonSmall { padding : 4px 10px; }
.button.buttonLarge { font-size : 16px !important; padding : 10px 35px; }
.button.buttonChunky { font-size : 18px !important; padding : 15px; text-align : center; }
/* Enforce Button Widths */
.buttonWidth120 { width : 120px; }
.buttonWidth300 { width : 300px; }
.buttonWidth375 { width : 375px; }
/* Button Border */
.button.buttonBorder { border : 1px solid #979797; }
/* Example for Blue */
.button.buttonBlue_a {
background-color : #52b5e7; /* fallback color if gradients are not supported */
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#52b5e7', endColorstr='#0191cf'); /* IE 6-9 */
background-image : -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52b5e7), to(#0191cf)); /* Safari 4+, Chrome 1-9 */
background-image : -webkit-linear-gradient(top, #52b5e7, #0191cf); /* Safari 5.1+, iOS 5+, Chrome 10+ */
background-image : -moz-linear-gradient(top, #52b5e7, #0191cf); /* Firefox 3.6 to 15 */
background-image : -ms-linear-gradient(top, #52b5e7, #0191cf); /* For IE 10+ */
background-image : -o-linear-gradient(top, #52b5e7, #0191cf); /* Opera 11.10-12.00 */
background-image : linear-gradient(to bottom, #52b5e7, #0191cf); /* Standard syntax; must be last - Chrome 26, Firefox 16+, IE 10+, Opera 12.10+*/
}
.button.buttonBlue_a:hover {
background-color : #0191cf;
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#0191cf', endColorstr='#52b5e7');
background-image : -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0191cf), to(#52b5e7));
background-image : -webkit-linear-gradient(top, #0191cf, #52b5e7);
background-image : -moz-linear-gradient(top, #0191cf, #52b5e7);
background-image : -ms-linear-gradient(top, #0191cf, #52b5e7);
background-image : -o-linear-gradient(top, #0191cf, #52b5e7);
background-image : linear-gradient(to bottom, #0191cf, #52b5e7);
}
/* Example for Red */
.button.buttonRed_a {
background-color : #B55556;
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#B55556', endColorstr='#990000');
background-image : -webkit-gradient(linear, 0% 0%, 0% 100%, from(#B55556), to(#990000));
background-image : -webkit-linear-gradient(top, #B55556, #990000);
background-image : -moz-linear-gradient(top, #B55556, #990000);
background-image : -ms-linear-gradient(top, #B55556, #990000);
background-image : -o-linear-gradient(top, #B55556, #990000);
background-image : linear-gradient(to bottom, #B55556, #990000);
}
.button.buttonRed_a:hover {
background-color : #990000;
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#990000', endColorstr='#B55556');
background-image : -webkit-gradient(linear, 0% 0%, 0% 100%, from(#990000), to(#B55556));
background-image : -webkit-linear-gradient(top, #990000, #B55556);
background-image : -moz-linear-gradient(top, #990000, #B55556);
background-image : -ms-linear-gradient(top, #990000, #B55556);
background-image : -o-linear-gradient(top, #990000, #B55556);
background-image : linear-gradient(to bottom, #990000, #B55556);
}
/* Example for Button with an Arrow */
.button.buttonArrow_a {
text-align : left;
-webkit-box-sizing : border-box; /* Safari/Chrome, Android <= 2.3, iOS <= 4, other WebKit */
-moz-box-sizing : border-box; /* Firefox 1+, other Gecko */
box-sizing : border-box; /* Chrome, IE 8+, Opera, Safari 5.1 */
}
.button.buttonArrow_a:after { content : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAPCAYAAADd/14OAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkEyMTA3ODMxM0REMTFFMzk5MEE5MjU0QThGOUUzMjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkEyMTA3ODQxM0REMTFFMzk5MEE5MjU0QThGOUUzMjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2QTIxMDc4MTEzREQxMUUzOTkwQTkyNTRBOEY5RTMyNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2QTIxMDc4MjEzREQxMUUzOTkwQTkyNTRBOEY5RTMyNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjD0/QEAAAFZSURBVHjaYmTWjmIAglAgrgPiTCA+woAFMAFxSnKw46yXR2ZqedjqrwHyPbEpZG5sbFjZVRIlxcXJzhjibs5959FLz6t3njwCyl1BUbhr47IsZiYmETCHmYkxwMWE6827zy5nrt77DBQ6DVf5//9/kb9//535jwT+/fv3v27Sqo9A99cAMSPYHyACKMf75+/fff/RwMTF27+w6kb3AdUwgxVCFbMDTVqLrnjJ5sNfOfRj5zAziemCndA0bd1fRkbGDUBmhIK0qDDMaXpqcqwuljoCTEgeY2+ftWHW+09fZdGDxkxX5RTMal5+06T12w9d+P4fE8wEYrAbRcWs0/YePXfzJxZFrUAM8bWiS+6RSzcf/kJT8A+Ii2AeBWHGN+8/PxEW4JFGCleQp5JZdKIXosQ1UFEHSB7EAYbzT6CiIHRFYIVAwSlAOgaInzExMboD+ZuwJQqAAAMAG2nmEbLd+CwAAAAASUVORK5CYII=); width : 8px; height : 10px; float : right; margin : 3px 0 0 10px; }
/* Arrow Button Widths */
.buttonArrow_a.buttonWidth170 { width : 170px }
.buttonArrow_a.buttonWidth200 { width : 200px }
.buttonArrow_a.buttonWidth240 { width : 240px }
.buttonArrow_a.buttonWidth325 { width : 325px }
/* Combining Arrow and Sizes */
.button.buttonArrow_a.buttonLarge { padding : 10px 15px 10px 25px }
/* Overlap the button with some container */
.buttonOverHangRight { position : absolute; right : -10px; }