I want to create a custom button for a file upload in a form using simple html and css.
Here is my code.
.upload-btn-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="upload-btn-wrapper">
<button class="btn">Upload a file<i style="font-size:18px" class="fa"></i></button>
<input type="file" name="myfile" />
</div>
if it is just about to design upload button cutomly then this css code is also usefull.
Here is your css
and open the snippet to check.
.upload_field input.wpcf7-file::-webkit-file-upload-button {
border: none;
color: #fff;
font-weight: 500;
background: linear-gradient(90deg, rgba(35,90,75,8) 0%, rgb(33, 169, 99) 35%, rgba(39,203,119,1) 100%);
padding: 4px 18px;
border-radius: 30px;
cursor: pointer;
box-shadow: 2px 1px 9px -3px #25c171;
}
.upload_field input.wpcf7-file::-webkit-file-upload-button:hover {
background: linear-gradient(90deg, rgba(39,203,119,1) 0%, rgba(39,203,119,1) 35%, rgba(14,90,51,1) 100%);
}
.upload_field input.wpcf7-file::-webkit-file-upload-button:focus{
outline:none;
}
.upload_field input.wpcf7-file:focus {
outline: none;
}
.upload_field {
margin-bottom: 20px;
padding-left: 5px;
border: 1px solid #e6e6e6;
padding: 15px 10px 25px;
border-radius: 20px;
}
<div class="upload_field">
<label>Please Upload Your Resume(jpg,png, pdf, doc).<br>
<span class="wpcf7-form-control-wrap file-874"><input type="file" name="file-874" size="40" class="wpcf7-form-control wpcf7-file" accept=".jpg,.png,.pdf,.doc" aria-invalid="false"></span></label>
</div>
.upload-btn-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
}
.fa {
margin-left: 10px;
padding: 10px;
background: white;
color : #0e5a33;
border-radius: 50%;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.btn {
border: 2px solid #0e5a33;
background-color: #0e5a33;
box-shadow: 8px 8px 18px 0px rgba(84, 181, 119, 0.3) !important;
font-size: 18px;
padding: 5px 5px 5px 28px;
border-radius: 25px;
color: white;
}
.btn:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
opacity: 1;
-webkit-transform: translate(-105%, 0);
transform: translate(-105%, 0);
background-color: rgba(255, 255, 255, 0.8);
}
.btn:hover:before{
opacity: 0;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.upload-btn-wrapper input[type=file] {
font-size: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="upload-btn-wrapper">
<button class="btn">Upload a file<i style="font-size:18px" class="fa"></i></button>
<input type="file" name="myfile" />
</div>
<!DOCTYPE html>
<html>
<head>
<style>
.button {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
</style>
</head>
<body>
<h2>Animated Button</h2>
<button class="button" style="vertical-align:middle"><span>Upload File </span>
</button>
</body>
</html>
Related
Hi I'm trying to make a simple text pop-up button using just html and CSS. I looked at a bunch of examples but most of them use JavaScript in some way so I cant use them. found some that is pure CSS but when I tried them, they all do this weird thing where closing the pop-up brings me to top of page. Any help is appreciated. Thanks
jsfiddle: http://jsfiddle.net/hjrudc5n/
This is my HTML
```
<div class="box"><a class="button" href="#popup1">Show Overlay</a></div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">Content</div>
</div>
</div>
</div>
and this is my CSS
/*pop up overlay */
.box {
width: 20%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid blue;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: blue;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
Check this out:
http://jsfiddle.net/aj43psdw/13/
The problem with your code was that using "#" as an href will always take you to the top of the page, no matter what. Also, makes thing hard to control.
What you can do. is work with labels and checkboxes, and control the "state" of things via that.
Like this:
[name="popup"]{
width:0;
height:0;
overflow:hidden;
position:relative;
z-index:-1;
pointer-events:none;
}
[name="popup"]:checked ~ .overlay{
visibility: visible;
opacity: 1;
}
In the fiddle I linked you, clicking the button will check the checkbox, that we'll show via css. the X button will do the same, unchecking it.
It was because of href="#" of the anchor tag you were using, which led to going to top of page on closing the popup.
A workaround is to use <input type="checkbox" /> (so that you can use :checked selector) along with <label>(so that you can still interact with checkbox after hiding it), to hide, and unhide the popup.
/*pop up overlay */
.box {
width: 20%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid blue;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: blue;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
#pop:checked + .overlay {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#pop{
display: none; /*Hide the checkbox*/
}
<div class="box"><label class="button" for="pop">Show Overlay</label></div>
<input type="checkbox" id="pop" />
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<label class="close" for="pop">×</label>
<div class="content">Content</div>
</div>
</div>
I'm trying to add a popup block which will work differently for each row. I used same checkbox id to work with CSS. But it always checks the first option. As a result, the first option in the list get deleted (as I'm working with delete button) instead of the selected one
This is my HTML part :
{% for item in items %}
<input type="checkbox" id="popup">
<label for="popup" class="del_btn">Delete</label>
<div class="popup-content">
<div class="pop-header">
<h2>Confirm deletion?</h2>
<label for="popup" class="fa fa-times"></label>
</div>
<label for="popup" class="fa fa-exclamation"></label>
<p>Once deleted, all data related to it can't be restored again.<br>Proceed to delete?</p>
<div class="line"></div>
<a href="{% url 'delete_item' item.id %}" class="btn btn-danger btn-sm" role="button">
<i class="fa fa-trash"></i>
<span>Delete</span>
</a>
<label for="popup" class="close-btn">Cancel</label>
</div>
And my CSS part :
.popup-content
{
top: 50%;
left: 50%;
opacity: 0;
visibility: hidden;
transform: translate(-50%, -50%);
position: fixed;
width: 450px;
height: 350px;
transition: 0.3s ease-in;
background-color: khaki;
border-radius: 3px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.4);
}
/* #popup
{
display: none;
} */
#popup:checked ~ .popup-content
{
opacity: 1;
visibility: visible;
}
.pop-header
{
height: 90px;
background-color: #27AE60;
overflow: hidden;
border-radius: 3px 3px 0 0;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
}
.pop-header h2
{
font-size: 40px;
line-height: 45px;
color: white;
font-weight: normal;
}
.popup-content p
{
font-size: 16px;
color: red;
text-align: center;
}
.line
{
position: absolute;
bottom: 60px;
height: 1px;
width: 100%;
background-color: black;
}
.fa-times
{
position: absolute;
right: 20px;
top: 35px;
color: #E8F7FC;
font-size: 20px;
font-weight: bold;
cursor: pointer;
}
.fa-exclamation
{
font-size: 50px;
color: #27AE60;
height: 80px;
width: 80px;
text-align: center;
border: 2px solid #27AE60;
border-radius: 50%;
box-sizing: border-box;
padding-top: 13px;
margin: 30px 0;
}
.del_btn
{
font-size: inherit;
display: block;
width: 62.36px;
height: 33px;
line-height: 33px;
background: #d9534f;
border: 1px solid #d9534f;
border-radius: 3px;
cursor: pointer;
transition: 0.5s;
}
.del_btn:hover
{
background: red;
}
.close-btn
{
position: absolute;
bottom: 2.5px;
right: 10px;
font-size: 18px;
color: #27AE60;
border: 1px solid #27AE60;
border-radius: 3px;
padding: 8px 10px;
cursor: pointer;
}
.close-btn:hover
{
background-color: #27AE60;
color: khaki;
transition-delay: 0.1s;
}
.popup-content .btn-danger
{
position: absolute;
bottom: 6px;
right: 100px;
font-size: 18px;
padding: 8px 10px;
}
I also tried
<input type="checkbox" id="popup popup_{{item.id}}>
It successfully creates dynamically different id for different row, but CSS doesn't work in that case.
The :checked pseudo-class in CSS is only associated with input (<input>) elements of type radio and checkbox. You can rewrite your CSS as follows:
input[type=checkbox]:checked#popup ~ .popup-content {
opacity: 1;
visibility: visible;
}
The usage of id suggests that there is only one popup element, I would suggest using a class instead:
input[type=checkbox]:checked.popup ~ .popup-content {
opacity: 1;
visibility: visible;
}
You should not have same id for two elements and cannot have two ids for an element. Make the input element as this
<input type="checkbox" class="popupCheckbox" id="popup_{{item.id}}">
And CSS selector as this .popupCheckbox
I've a span as a label for my inputfield. The label goes above the input field when selected.
My problem is that when you try to click on the input field, the label is 'in front' of the inputfield and blocks you from selecting it.
I tried fixing it using z-indexes but this doesn't seem to work.
Can somebody help me with getting the input field in front of the span?
#input {
color: #686868;
vertical-align: middle;
padding: 0px !important;
font-size: 16px;
border-width: 0;
overflow: visible;
box-shadow: none;
border: none;
border-bottom: 1px solid #d5dce3;
background-color: transparent !important;
}
#input:focus {
border-color: #1F76BC;
}
#label {
color: rgba(0,0,0,.99);
transition-timing-function: cubic-bezier(.075,.82,.165,1);
transition-duration: .5s;
position: absolute;
width: 100%;
text-align: left;
font-size: 16px;
bottom: 6px;
color: #8792a1;
}
.container:focus-within #label {
transform: translate3d(0,-26px,0);
color: rgba(0,0,0,.99);
}
.container {
position: relative;
margin-top: 32px;
}
<div class="container">
<span id="label">Provincie</span>
<input type="text" id="input" value="" size="40">
</div>
Use label instead of span and your input will be well clickable, regardless of the location of the placeholder
input = document.querySelector("#input");
label = document.querySelector(".container > label");
input.addEventListener("change", function () {
if (this.value !== "") {
label.style.transform = "translate3d(0, -26px, 0)";
} else {
label.style.transform = "";
}
});
#input {
color: #686868;
vertical-align: middle;
padding: 0px !important;
font-size: 16px;
border-width: 0;
overflow: visible;
box-shadow: none;
border: none;
border-bottom: 1px solid #d5dce3;
background-color: transparent !important;
}
#input:focus {
border-color: #1f76bc;
}
label {
color: rgba(0, 0, 0, 0.99);
transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
transition-duration: 0.5s;
position: absolute;
width: 100%;
text-align: left;
font-size: 16px;
bottom: 6px;
color: #8792a1;
}
.container:focus-within label {
transform: translate3d(0, -26px, 0);
color: rgba(0, 0, 0, 0.99);
}
.container {
position: relative;
margin-top: 32px;
}
<div class="container">
<label for="input">Provincie</label>
<input type="text" id="input" value="" size="40" />
</div>
please add this style.
#input{
position:relative;
z-index:999;
}
#input {
color: #686868;
vertical-align: middle;
padding: 0px !important;
font-size: 16px;
border-width: 0;
overflow: visible;
box-shadow: none;
border: none;
border-bottom: 1px solid #d5dce3;
background-color: transparent !important;
position:relative;
z-index:999;
}
#input:focus {
border-color: #1F76BC;
}
#label {
color: rgba(0,0,0,.99);
transition-timing-function: cubic-bezier(.075,.82,.165,1);
transition-duration: .5s;
position: absolute;
width: 100%;
text-align: left;
font-size: 16px;
bottom: 6px;
color: #8792a1;
}
.container:focus-within #label {
transform: translate3d(0,-26px,0);
color: rgba(0,0,0,.99);
}
.container {
position: relative;
margin-top: 32px;
}
<div class="container">
<span id="label">Provincie</span>
<input type="text" id="input" value="" size="40">
</div>
Something like this??
#input {
color: #686868;
vertical-align: middle;
padding: 0px !important;
font-size: 16px;
border-width: 0;
overflow: visible;
box-shadow: none;
border: none;
border-bottom: 1px solid #d5dce3;
background-color: transparent !important;
}
#input:focus {
border-color: #1F76BC;
}
#label {
color: rgba(0, 0, 0, .99);
transition-timing-function: cubic-bezier(.075, .82, .165, 1);
transition-duration: .5s;
position: absolute;
width: 100%;
text-align: left;
font-size: 16px;
bottom: 6px;
color: #8792a1;
}
.container:focus-within #label {
transform: translate3d(0, -26px, 0);
color: rgba(0, 0, 0, .99);
}
.container {
position: relative;
margin-top: 32px;
}
<div class="container">
<input type="text" id="input" value="" size="40" placeholder="Provincie">
</div>
I have made this button by editing "Simple Hover Effect by Vincent Durand". But the problem is that some css in my blog is overlapping. So it is not aligning to middle correctly. I cant find which one it may be. I tried using !important tag in some places. But I guess it didn't work out. What I need to know where should I use !important in this code to align the button to middle? Or will I need a new css element to do that?
<!-- Awesome button css Start -->
.btn-margin {
margin-top: 1.6rem;
box-sizing: inherit;
text-align: center;
}
.btn {
-webkit-tap-high!importantr: transparent;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
box-sizing: inherit;
color: white !important;
cursor: pointer;
display: inline-block;
height: auto;
letter-spacing: 0.5px;
line-height: 42px;
pointer-events: all;
position: relative;
text-decoration-line: none;
vertical-align: middle;
font-size: 1.6em;
padding: 0 2em;
transition: 800ms ease all;
}
.btn-green {
background-color: #1AAB8A;
}
.btn-green:hover {
background-color: #fff;
color: #1AAB8A !important;
}
.btn:before,.btn:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
.btn:after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
.btn-green:before,.btn-green:after {
background: #1AAB8A;
}
.btn:hover:before,.btn:hover:after {
width: 100%;
transition: 800ms ease all;
}
<!-- Awesome button css End -->
<div class="btn-margin">
<a class="btn btn-green" href="#">
Click Here To See Answers
</a>
</div>
Add *{box-sizing:border-box;} to ur css
<!-- Awesome button css Start -->
*{box-sizing:border-box;}
.btn-margin {
margin-top: 1.6rem;
box-sizing: inherit;
text-align: center;
}
.btn {
-webkit-tap-high!importantr: transparent;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
box-sizing: inherit;
color: white !important;
cursor: pointer;
display: inline-block;
height: auto;
letter-spacing: 0.5px;
line-height: 42px;
pointer-events: all;
position: relative;
text-decoration-line: none;
vertical-align: middle;
font-size: 1.6em;
padding: 0 2em;
transition: 800ms ease all;
}
.btn-green {
background-color: #1AAB8A;
}
.btn-green:hover {
background-color: #fff;
color: #1AAB8A !important;
}
.btn:before,.btn:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
.btn:after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
.btn-green:before,.btn-green:after {
background: #1AAB8A;
}
.btn:hover:before,.btn:hover:after {
width: 100%;
transition: 800ms ease all;
}
<!-- Awesome button css End -->
<div class="btn-margin">
<a class="btn btn-green" href="#">
Click Here To See Answers
</a>
</div>
Use this CSS to center align the button
.btn-green {
background-color: #1AAB8A;
position: relative;
left: 50%;
transform: translateX(-50%);
}
<!-- Awesome button css Start -->.btn-margin {
margin-top: 1.6rem;
box-sizing: inherit;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.btn {
-webkit-tap-high!importantr: transparent;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
box-sizing: inherit;
color: white !important;
cursor: pointer;
display: inline-block;
height: auto;
letter-spacing: 0.5px;
line-height: 42px;
pointer-events: all;
position: relative;
text-decoration-line: none;
vertical-align: middle;
font-size: 1.6em;
padding: 0 2em;
transition: 800ms ease all;
}
.btn-green {
background-color: #1AAB8A;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.btn-green:hover {
background-color: #fff;
color: #1AAB8A !important;
}
.btn:before,
.btn:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
.btn:after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
.btn-green:before,
.btn-green:after {
background: #1AAB8A;
}
.btn:hover:before,
.btn:hover:after {
width: 100%;
transition: 800ms ease all;
}
<!-- Awesome button css End -->.btn-green {}
<div class="btn-margin">
<a class="btn btn-green" href="https://myneobuxportal.blogspot.com/p/answer-gamer-quiz-v2.html">
Click Here To See Answers
</a>
</div>
add one parent div and set this div text-align: center;
<!-- Awesome button css Start -->
.demo{
text-align: center;
}
.btn-margin {
margin-top: 1.6rem;
box-sizing: inherit;
text-align: center;
}
.btn {
-webkit-tap-high!importantr: transparent;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
box-sizing: inherit;
color: white !important;
cursor: pointer;
display: inline-block;
height: auto;
letter-spacing: 0.5px;
line-height: 42px;
pointer-events: all;
position: relative;
text-decoration-line: none;
vertical-align: middle;
font-size: 1.6em;
padding: 0 2em;
transition: 800ms ease all;
}
.btn-green {
background-color: #1AAB8A;
}
.btn-green:hover {
background-color: #fff;
color: #1AAB8A !important;
}
.btn:before,.btn:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
.btn:after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
.btn-green:before,.btn-green:after {
background: #1AAB8A;
}
.btn:hover:before,.btn:hover:after {
width: 100%;
transition: 800ms ease all;
}
<!-- Awesome button css End -->
<div class="Demo">
<div class="btn-margin">
<a class="btn btn-green" href="#">
Click Here To See Answers
</a>
</div>
</div>
In the end the problem was with the comment :(
I used html comment in css. That's why this happened. Thanks #CharuMaheshwari for mentioning that out. Also another thanks for other 3 answers. All of them worked.
With #CharuMaheshwari help this is the code I decided to use.
/* Awesome button css Start */
.btn-margin {
margin-top: 1.6rem;
box-sizing: inherit;
text-align: center;
}
.btn {
-webkit-tap-high!importantr: transparent;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
box-sizing: inherit;
color: white !important;
cursor: pointer;
display: inline-block;
height: auto;
letter-spacing: 0.5px;
line-height: 42px;
pointer-events: all;
position: relative;
text-decoration-line: none;
vertical-align: middle;
font-size: 1.6em;
padding: 0 2em;
transition: 800ms ease all;
}
.btn-green {
background-color: #1AAB8A;
}
.btn-green:hover {
background-color: #fff;
color: #1AAB8A !important;
}
.btn:before,.btn:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
.btn:after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
.btn-green:before,.btn-green:after {
background: #1AAB8A;
}
.btn:hover:before,.btn:hover:after {
width: 100%;
transition: 800ms ease all;
}
/* Awesome button css End */
<div class="btn-margin">
<a class="btn btn-green" href="#">
Click Here To See Answers
</a>
</div>
Can anyone help me with wrapping of the text around the + box ? I can't seem to get it to work. I have a jfiddle that you can refer to. Hope anyone out there can assist me.
Here's the JSFiddle.
And here is the code:
.video-box {
float: left;
width: 31%;
max-width: 240px;
height: 214px;
background: #232323;
margin: 0 1% 2%;
}
.video-box h3 {
display: table-cell;
vertical-align: middle;
margin: 0;
font-size: 1.0em;
line-height: 1.2;
}
.addtoplaylist-videotext:before {
border: solid;
border-color: #222 transparent;
border-width: 6px 6px 0 6px;
bottom: -8px;
content: "";
left: 80%;
position: absolute;
display: inline-block;
z-index: 99;
border-top: 10px solid rgba(0, 0, 0, 0.6);
}
a {
color: #FFFFFF;
}
.video-txt {
position: absolute;
bottom: 0;
right: 0;
font-size: 1.1em;
line-height: 16px;
background: #000;
padding: 0 3px;
color: #fff;
}
.addtoplaylist-videotext {
background-color: #ffffff;
background-color: rgba(0, 0, 0, 0.6);
border-color: rgba(0, 0, 0, 0.6);
border-right-color: #ffffff;
border-radius: 5px;
top: -50px;
color: #ffffff;
left: -100px;
padding: 5px 5px;
position: relative;
z-index: 99;
width: 120px;
height: 15px;
text-align: center;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#1e78a0', endColorstr='#1e78a0');
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
cursor: pointer;
display: none;
}
.viewplaylist-videotext:before {
border: solid;
border-color: #222 transparent;
border-width: 6px 6px 0 6px;
bottom: -8px;
content: "";
left: 80%;
position: absolute;
display: inline-block;
z-index: 99;
border-top: 10px solid rgba(0, 0, 0, 0.6);
}
.viewplaylist-videotext {
background-color: #ffffff;
background-color: rgba(0, 0, 0, 0.6);
border-color: rgba(0, 0, 0, 0.6);
border-right-color: #ffffff;
border-radius: 5px;
top: -50px;
color: #ffffff;
left: -100px;
padding: 5px 5px;
position: relative;
z-index: 99;
width: 120px;
height: 15px;
text-align: center;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#1e78a0', endColorstr='#1e78a0');
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
cursor: pointer;
display: none;
}
.addtoplaylist-video:hover .addtoplaylist-videotext {
display: block;
}
.viewplaylist-video:hover .viewplaylist-videotext {
display: none;
}
.title {
color: #FFFFFF;
}
.maintainhere-browse {
float: right;
height: 30px;
margin-left: 3px;
margin-top: 20px;
position: relative;
}
.toggle2 {
position: relative;
float: right;
margin-right: 10px;
margin-top: -15px;
background-color: #f36666;
width: 20px;
height: 18px;
color: #FFFFFF;
font-size: 12px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
cursor: pointer;
font-weight: bold;
}
.addtoplaylist-video {
position: relative;
bottom: 0px;
right: 0px;
width: auto;
height: auto;
image-rendering: -moz-crisp-edges;
display: inline-block;
cursor: pointer;
}
.viewplaylist-video {
display: none;
}
}
.addtoplaylist-video a {
color: #FFFFFF !important;
}
.viewplaylist-video a {
color: #FFFFFF !important;
}
.play-ico {
background-position: -2px -1351px;
background: url(/blob/1086/1386905708000/a-ico-sprite-png-data.png) no-repeat -2px -1316px;
text-indent: -9999px;
position: absolute;
top: 0;
left: 0;
width: 33px;
height: 33px;
overflow: hidden;
text-align: left;
}
<div class="video-box">
<div class="video-box-content-holder" data-createtime="1385208101000" data-viewcounts="559">
<div class="img" style="max-height:135px">
<a href="/news/video/typhoon-haiyan-politics/897416.html">
<img src="http://i58.tinypic.com/2uj2o3t.jpg" alt="" width="240" height="135" />
<span class="play-ico">play</span>
<span class="video-txt">01:54</span>
</a>
<span class="add-txt">Asia Pacific</span>
</a>
</div>
<div class="txt-box">
<!-- the class toggle 2 is for 2nd component, diff css-->
<div class="maintainhere-browse">
<div id="browsevideos_1" class="toggle2">
<div class="addtoplaylist-video">
<img src="http://i61.tinypic.com/rtdv2b.png" width="12" height="11" alt="add" class="addplaylisticonimg-browse">
<span class="addtoplaylist-videotext"> Add To Playlist!</span>
</div>
<div class="viewplaylist-video">
<img src="http://i59.tinypic.com/2n98as.png" width="17" height="9" alt="viewicon" class="viewplaylisticonimg-browse">
<span class="viewplaylist-videotext"> View Playlist!</span>
</div>
</div>
</div>
<!--endofmaintainhere-->
<div class="title">
<h3 style="color:white;">Typhoon Haiyan: Politics gets in the way of saving lives i want the text to wrap around </h3>
<span class="date" style="color:white;">23 Nov 2013</span>
</div>
<!-- title -->
</div>
</div>
</div>
So the basic problem is assigning display: table to .video-box h3.
Once that is removed, it actually does wrap. The problem is now that you won't see it with that text, because it so happens that those words would move to the next line anyway. I've added more words and removed the height of the container and you can see this working:
DEMO showing text is wrapping without table-cell property.
In your case, I'd consider rewriting some of the code around positioning the .maintainhere-browse button:
.maintainhere-browse{
...
/*margin-top:20px; Remove this line */
...
}
.toggle2 {
...
margin-top: 10px; /* Changed this value */
...
}
Demo