Add CSS3 Button to HTML Page

Add CSS3 Button to HTML Page - javascript

I have the following button in between my style tags:
<style>
.myButton {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
.myButton:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
.myButton:active {
border-top-color: #1b435e;
background: #1b435e;
}
</style>
Question:
How would I add the button to my HTML page with the ID of btnAdd
Is this the correct way of doing it:
<button class="myButton" id="btnAdd" /> Add </button>

1.)
<a class="myButton" id="btnAdd"> Add </a>
2.)
and then this? (full code below)
document.addEventListener('DOMContentLoaded', function(){
});
function myFunc(){ alert('Hey Hey Hey, is that a mirror in your pocket?'); }
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('btnAdd').addEventListener('click', myFunc);
});
.myButton {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
.myButton:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
.myButton:active {
border-top-color: #1b435e;
background: #1b435e;
}
<a class="myButton" id="btnAdd" href="#"> Add </a>
3.) Based on comment request, can also do it this way:
<p>This example uses the addEventListener() method to attach a click event to a button.</p>
<a class="myButton" id="btnAdd" href="#"> Add </a>
<p><strong>Note:</strong> The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.</p>
<p id="demo"></p>
<script>
document.getElementById("btnAdd").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
</script>
JSFIDDLE
4.) And also without using href="" in the <a> tag
JSFIDDLE (no link in a tag)

The correct format would be:
<button class="myButton" id="btnAdd">Add</button>
What you posted is a mixture between a standard tag and a self-closing tag. If you use a self-closing tag, you do not need the trailing enclosure (</button> in this case), but button is not an element that supports self-closing tags so a standard tag enclosure should be used.

Related

How to change tooltip background color?

I have created a tooltip in my html file like this:
<span title="" class="duedate-warning-msg"></span>
And I set the CSS property like this:
.duedate-warning-msg{
background: url("/static/img/error.png") no-repeat scroll 14px 12px white;
border-color: #f5c7c7;
padding: .5em 0.25em 0.5em 2.5em;
title:"my tooltip";
color: #D11006;
}
span:hover{
position:relative;
}
span[title]:hover:after {
content: "This statement is past due.";
padding: 4px 8px;
color: white;
font-size:16px;
font-family: "open_sansregular";
background: #0679ca;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
The above style created tooltip perfectly. Only problem which I am facing is that I want background color of tooltip is blue. But it always shows gray. Why it is happening so?

Remove the background-image and add background, like so:
span[title]:hover:after {
content: "This statement is past due.";
padding: 4px 8px;
color: white;
font-size:16px;
font-family: "open_sansregular";
background: #0679ca;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background: #00F;
}

Easy, in background-image property replace #cccccc with a color of your choice, assuming that you want to keep the fade-to-almost-white (#eeeeee) gradient.

Remove the background image from span[title]:hover:after
Here is the working Demo

Create a DIV onclick

I have a div and a button which are laid out fine. When I click the button, how can I make the same div spawn again and again. I have tried adding an onclick function but I do not know how I would implement adding the div to it.
HTML
<div class="note" contenteditable="true">
<span id='close' contenteditable='false' onclick='this.parentNode.parentNode.removeChild(this.parentNode)'>
<img src="images/close.png" height="25" width="25" align="right" style="vertical-align: top; float: right"/>
</span>Keep clicking this text to select
</div>
<a href='#' class='button'>Create Note</a>
Javascript
<script type="text/javascript">
$(function() {
$(".note").resizable();
$(".note").keyup(function() {
$(this).css('height', '100%');
});
$(".note").draggable()
.click(function() {
$(this).draggable({
disabled: false
});
}).dblclick(function() {
$(this).draggable({
disabled: true
});
});
});
</script>
CSS
.note {
width: 280px;
height: 100px;
padding-top: 40px;
margin-top: 60px;
margin-left: 35px;
word-break: break-word;
font-family: Note;
font-size: 30px;
background-image: url("images/stickynote.png");
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
}
.note img{
position:relative;
position: absolute;
top: 0px;
right: 0px;
}
.button {
position: fixed;
top: 160px;
margin-left: 44%;
border: 1px solid #000000;
background: #f2ad24;
background: -webkit-gradient(linear, left top, left bottom, from(#ffff92), to(#f2ad24));
background: -webkit-linear-gradient(top, #ffff92, #f2ad24);
background: -moz-linear-gradient(top, #ffff92, #f2ad24);
background: -ms-linear-gradient(top, #ffff92, #f2ad24);
background: -o-linear-gradient(top, #ffff92, #f2ad24);
background-image: -ms-linear-gradient(top, #ffff92 0%, #f2ad24 100%);
padding: 13px 26px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
text-shadow: #7ea4bd 0 1px 0;
color: #000000;
font-size: 35px;
font-family: Note;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border: 1px solid #0a3c59;
text-shadow: #1e4158 0 1px 0;
background: #f08d24;
background: -webkit-gradient(linear, left top, left bottom, from(#ffe194), to(#f08d24));
background: -webkit-linear-gradient(top, #ffe194, #f08d24);
background: -moz-linear-gradient(top, #ffe194, #f08d24);
background: -ms-linear-gradient(top, #ffe194, #f08d24);
background: -o-linear-gradient(top, #ffe194, #f08d24);
background-image: -ms-linear-gradient(top, #ffe194 0%, #f08d24 100%);
color: #212121;
}
.button:active {
text-shadow: #1e4158 0 1px 0;
border: 1px solid #0a3c59;
background: #f09424;
background: -webkit-gradient(linear, left top, left bottom, from(#ffe194), to(#f08d24));
background: -webkit-linear-gradient(top, #ffe194, #f09424);
background: -moz-linear-gradient(top, #ffe194, #f09424);
background: -ms-linear-gradient(top, #ffe194, #f09424);
background: -o-linear-gradient(top, #ffe194, #f09424);
background-image: -ms-linear-gradient(top, #ffe194 0%, #f09424 100%);
color: #fff;
}

Here is a simple example of how you can use jQuery accomplish what it is you're trying to do. Obviously this is not exactly tailored to your needs, but will give the basis for you to learn how it might work. You're likely going to want to look at the jQuery Clone method and jQuery AppendTo method.
CSS
.note {
margin-bottom: 10px;
background-color: yellow;
width: 100px;
height: 100px;
}
jQuery
$(function() {
$('button').on('click', function() {
$('.note:last').clone().appendTo('.wrapper');
});
});
HTML
<div class="wrapper">
<div class="note">Content in div</div>
</div>
<button>Add note</button>
JSFiddle Example

Do you mean something like this?
$(window).ready(function(){
$('.button').click(function(e){
e.preventDefault();
var html = $('.template').html();
$('#notes').append('<div style="position:relative;">'+html+'<div>');
});
})
.note img{
position:relative;
position: absolute;
top: 0px;
right: 0px;
}
.button {
position: fixed;
top: 160px;
margin-left: 44%;
border: 1px solid #000000;
background: #f2ad24;
background: -webkit-gradient(linear, left top, left bottom, from(#ffff92), to(#f2ad24));
background: -webkit-linear-gradient(top, #ffff92, #f2ad24);
background: -moz-linear-gradient(top, #ffff92, #f2ad24);
background: -ms-linear-gradient(top, #ffff92, #f2ad24);
background: -o-linear-gradient(top, #ffff92, #f2ad24);
background-image: -ms-linear-gradient(top, #ffff92 0%, #f2ad24 100%);
padding: 13px 26px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
text-shadow: #7ea4bd 0 1px 0;
color: #000000;
font-size: 35px;
font-family: Note;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border: 1px solid #0a3c59;
text-shadow: #1e4158 0 1px 0;
background: #f08d24;
background: -webkit-gradient(linear, left top, left bottom, from(#ffe194), to(#f08d24));
background: -webkit-linear-gradient(top, #ffe194, #f08d24);
background: -moz-linear-gradient(top, #ffe194, #f08d24);
background: -ms-linear-gradient(top, #ffe194, #f08d24);
background: -o-linear-gradient(top, #ffe194, #f08d24);
background-image: -ms-linear-gradient(top, #ffe194 0%, #f08d24 100%);
color: #212121;
}
.button:active {
text-shadow: #1e4158 0 1px 0;
border: 1px solid #0a3c59;
background: #f09424;
background: -webkit-gradient(linear, left top, left bottom, from(#ffe194), to(#f08d24));
background: -webkit-linear-gradient(top, #ffe194, #f09424);
background: -moz-linear-gradient(top, #ffe194, #f09424);
background: -ms-linear-gradient(top, #ffe194, #f09424);
background: -o-linear-gradient(top, #ffe194, #f09424);
background-image: -ms-linear-gradient(top, #ffe194 0%, #f09424 100%);
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notes">
<div class="template" style="position:relative;">
<div class="note" contenteditable="true"> <span id='close' contenteditable='false' onclick='this.parentNode.parentNode.removeChild(this.parentNode)'>
<img src="images/close.png" height="25" width="25" align="right" style="vertical-align: top; float: right"/>
</span>Keep clicking this text to select</div>
</div>
</div>
<a href='#' class='button'>Create Note</a>

how to preserve formatting of html textarea

the question is i have a textarea, from which if the text is copied and pasted to a word document it looses all formatings like fonts and colors only plaintext is retained. I am alrewady aware of Ckeditor and nicedit but i am trying to make my own implementattion of such editor .
the question is what should be my approach?
which direction i should start?
Note: i am using javascript
the code is below
<html>
<head>
<script src="index.js" type="text/javascript"></script>
<link rel="index.css" type="text/css">
<style>
textarea {
resize: none;
width: 80%;
height: 600px;
}
#dock{
width: 80%;
height: 61px;
background: rgb(246, 242, 250);
-moz-box-shadow: 2px 0px 4px 0px rgb(128,128,128);
-webkit-box-shadow: 2px 0px 4px 0px rgb(128,128,128);
box-shadow: 2px 0px 4px 0px rgb(128,128,128);
}
.btn {
border:1px solid #495267; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
background-color: #606c88; background-image: -webkit-gradient(linear, left top, left bottom, from(#606c88), to(#3f4c6b));
background-image: -webkit-linear-gradient(top, #606c88, #3f4c6b);
background-image: -moz-linear-gradient(top, #606c88, #3f4c6b);
background-image: -ms-linear-gradient(top, #606c88, #3f4c6b);
background-image: -o-linear-gradient(top, #606c88, #3f4c6b);
background-image: linear-gradient(to bottom, #606c88, #3f4c6b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#606c88, endColorstr=#3f4c6b);
}
.btn:hover {
border:1px solid #363d4c;
background-color: #4b546a; background-image: -webkit-gradient(linear, left top, left bottom, from(#4b546a), to(#2c354b));
background-image: -webkit-linear-gradient(top, #4b546a, #2c354b);
background-image: -moz-linear-gradient(top, #4b546a, #2c354b);
background-image: -ms-linear-gradient(top, #4b546a, #2c354b);
background-image: -o-linear-gradient(top, #4b546a, #2c354b);
background-image: linear-gradient(to bottom, #4b546a, #2c354b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#4b546a, endColorstr=#2c354b);
}
#b1{
float:left;
width: 10px;
height: 25px;
line-height: 5px; /* <- changed this */
box-sizing: border-box;
margin-left: 3px;
margin-top: 3px;
}
</style>
</head>
<body>
<div id="editor">
<center>
<div id="dock">
<button type="button" class="btn" id="b1" onclick="myFunction()">B</button>
<button type="button" class="btn" id="b1" onclick="myFunction()"><i>i</i></button>
<button type="button" class="btn" id="b1" onclick="myFunction()">U</button>
</div>
<textarea id="textarea-1" rows="20" cols="70"></textarea>
</center>
</div>
</body>
</html>

Pressing CSS Styled button presents unwanted keyboard UIWebView

I have a local html resource loading in a UIWebView. One button is styled with CSS that when pressed, presents an unwanted keyboard and allows typing on the button
In my local html file
<style>
.button {
border: 0px solid #ed1717;
background: #e01414;
background: -webkit-gradient(linear, left top, left bottom, from(#e01414), to(#e01414));
background: -webkit-linear-gradient(top, #e01414, #e01414);
background: -moz-linear-gradient(top, #e01414, #e01414);
background: -ms-linear-gradient(top, #e01414, #e01414);
background: -o-linear-gradient(top, #e01414, #e01414);
background-image: -ms-linear-gradient(top, #e01414 0%, #e01414 100%);
padding: 14px 28px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
color: #ffffff;
font-size: 17px;
font-family: helvetica, serif;
text-decoration: none;
vertical-align: middle;
}
</style>
html button local resource
align=center ><INPUT onclick=calculate(this.form) class=button value="Press" name=calculate_button>

Try setting the type="button" attribute to the input element. This should do the trick :)

DIV over iframe blinks when I hover the mouse over this

I'm trying put a social button over iframe (youtube/vimeo video). This social buttons are inside a div container. The div container show/hidden the content with javascript. When I hover the mouse over the button, this blink. Can anyone help me to avoid the blink effect? I use javascript, but some css only based solution it's good, too.
Here a jsfidle code --> http://jsfiddle.net/QYpKH Thank you Tyler Rafferty for upload the file
HTML
<div class="overlaySharing">
<div id="overlayIcons">
<div class="row">
<div class="col-lg-12">
<a href="http://www.facebook.com/sharer.php?u=<?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?> ">
<div style="float: left; margin-right: 10px; margin-bottom: 10px; width: 250px;">
<div class="buttonFb"><span class="facebook"></span>Share en Facebook</div>
</div>
</a>
<a href="http://twitter.com/share?url=<?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?>&text=<?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?> <?php the_title(); ?>">
<div style="float: left; margin-right: 10px; margin-bottom: 10px; width: 250px;">
<div class="buttonTw"><span class="twitter"></span>Share Twitter</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="showButtons" onmouseover="document.getElementById('overlayIcons').style.display = 'block';" onmouseout="document.getElementById('overlayIcons').style.display = 'none';">
<iframe src="//player.vimeo.com/video/80871338" width="100%" height="500" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
Css
.overlaySharing {
padding: 0;
position: relative;
transition: opacity 0.4s ease 0s, top 0.25s ease 0s;
width: 100%;
z-index: 500;
}
#overlayIcons {
padding: 0;
top: 50px;
position: absolute;
width: 100%;
z-index: 6000;
}
.showButtons {
width: 100%;
height: 500px;
}
.buttonFb {
display: inline-block;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#599Bdc), color-stop(100%,#3072B3));
background: -moz-linear-gradient(center top, #599Bdc 0%, #3072B3 100%);
-webkit-box-shadow: 0px 1px 0px 0px #7dc0ff inset, 0px -1px 0px 0px #1a3d5e inset, 0px 2px 2px 0px #d4d4d4;
-moz-box-shadow: 0px 1px 0px 0px #7dc0ff inset, 0px -1px 0px 0px #1a3d5e inset, 0px 2px 2px 0px #d4d4d4;
box-shadow: 0px 1px 0px 0px #7dc0ff inset, 0px -1px 0px 0px #1a3d5e inset, 0px 2px 2px 0px #d4d4d4;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-shadow: 0px 1px 0px #424242;
padding: 10px 20px;
display: block;
border-color: #295c8c;
border-width: 1px;
border-style: solid;
font-family: Lucida Grande;
font-size: 14px;
color: #FFFFFF;
width: 251px;
}
.buttonFb:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82bbf0), color-stop(100%,#3072B3));
background: -moz-linear-gradient(center top, #82bbf0 0%, #3072B3 100%);
}
.buttonFb:active {
background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#143a5e), color-stop(100%,#5ea3e0));
background: -moz-linear-gradient(center top, #143a5e 20%, #5ea3e0 100%);
-webkit-box-shadow: 0px 1px 0px 0px #54799c inset;
-moz-box-shadow: 0px 1px 0px 0px #54799c inset;
box-shadow: 0px 1px 0px 0px #54799c inset;
}
.buttonTw {
display: inline-block;
background: #58bfd8; /* Old browsers */
background: -moz-linear-gradient(top, #58bfd8 0%, #3096b2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#58bfd8), color-stop(100%,#3096b2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #58bfd8 0%,#3096b2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #58bfd8 0%,#3096b2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #58bfd8 0%,#3096b2 100%); /* IE10+ */
background: linear-gradient(to bottom, #58bfd8 0%,#3096b2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#58bfd8', endColorstr='#3096b2',GradientType=0 ); /* IE6-9 */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-shadow: 0px 1px 0px #424242;
padding: 10px 14px;
display: block;
border-color: #008CAF;
border-width: 1px;
border-style: solid;
font-family: Lucida Grande;
font-size: 14px;
color: #FFFFFF;
width: 231px;
}
.buttonTw:hover {
background: #effbff; /* Old browsers */
background: -moz-linear-gradient(top, #effbff 0%, #3096b2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#effbff), color-stop(100%,#3096b2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #effbff 0%,#3096b2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #effbff 0%,#3096b2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #effbff 0%,#3096b2 100%); /* IE10+ */
background: linear-gradient(to bottom, #effbff 0%,#3096b2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#effbff', endColorstr='#3096b2',GradientType=0 ); /* IE6-9 */
}
.buttonTw:active {
background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#143a5e), color-stop(100%,#5ea3e0));
background: -moz-linear-gradient(center top, #143a5e 20%, #5ea3e0 100%);
-webkit-box-shadow: 0px 1px 0px 0px #54799c inset;
-moz-box-shadow: 0px 1px 0px 0px #54799c inset;
box-shadow: 0px 1px 0px 0px #54799c inset;
}

The blinking is caused by a small bug in your logic:
When the mouse enters the iframe, you show the buttons. When the mouse hovers over the button, it is leaving the iframe so the mouse-out event fires. This causes the buttons to go away. But now the mouse is over the iframe again so the mouse-over fires and the button comes back. but wait! now the mouse is over the button again so the iframe mouse-out fires..... and so now you have a blinky button :)
You need to add some logic to not hide the buttons if the mouse is over them. You may be able to avoid it if the buttons AND the iframe were all inside the same div. That 'parent' div could handle the mouse events. (And in fact, it works if you move your "overlaySharing" div inside your "showButtons" div -- http://jsfiddle.net/5crKg/)
<div class="showButtons" onmouseover="document.getElementById('overlayIcons').style.display = 'block';" onmouseout="document.getElementById('overlayIcons').style.display = 'none';">
<div class="overlaySharing">
<div id="overlayIcons">
<div class="row">
<div class="col-lg-12">
<a href="http://www.facebook.com/sharer.php?u=<?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?> ">
<div style="float: left; margin-right: 10px; margin-bottom: 10px; width: 250px;">
<div class="buttonFb"><span class="facebook"></span>Share en Facebook</div>
</div>
</a>
<a href="http://twitter.com/share?url=<?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?>&text=<?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?> <?php the_title(); ?>">
<div style="float: left; margin-right: 10px; margin-bottom: 10px; width: 250px;">
<div class="buttonTw"><span class="twitter"></span>Share Twitter</div>
</div>
</a>
</div>
</div>
</div>
</div>
<iframe src="//player.vimeo.com/video/80871338" width="100%" height="500" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Add CSS3 Button to HTML Page - javascript

Related

How to change tooltip background color?

Create a DIV onclick

how to preserve formatting of html textarea

Pressing CSS Styled button presents unwanted keyboard UIWebView

DIV over iframe blinks when I hover the mouse over this

Categories

Resources