I've a WhatsApp share button but I'm facing some issue with it. sharing function works well but the problem is that when the page loads(or while leaving the page), the background color of the button is displayed on the entire page for a short period of time which looks ugly. Can somebody help me to fix it? What should I change in this code so that the original theme color will be displayed while page loading instead of this WhatsApp button's color? Thanks in advance.
<style>
body{background-color:#49C34F}
.mct_whatsapp_btn {
background: #11A518;
color: white;
font-size: 16px;
padding: 6px 9px 6px 28px;
border-radius: 2px;
position: relative;
transition: ease-in all 0.3s;
moz-transition: ease-in all 0.3s;
-o-transition:ease-in all 0.3s;
-webkit-transition: ease-in all 0.3s;
text-decoration: none;
box-shadow: inset 3px 1px 1px rgba(17, 165, 24, 0.25);
border: 1px solid #028408;
}
.mct_whatsapp_btn:before {
content: '';
background: url(BACKGROUND IMAGE URL);
position:absolute;
top: 6px;
left: 7px;
width:16px;
transition: ease-in all 0.3s;
moz-transition: ease-in all 0.3s;
-o-transition:ease-in all 0.3s;
-webkit-transition: ease-in all 0.3s;
height:16px;
}
.mct_whatsapp_btn:hover {
background: #028408;
text-decoration: none;
color:white;
border: 1px solid #11A518;
box-shadow: inset 3px 1px 1px rgba(2, 132, 8, 0.25);
}
.mct_whatsapp_btn:hover:before {
transform: rotate(360deg);
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 well">
<a class="mct_whatsapp_btn" data-link="" data-text="" href="whatsapp://send?text=">Share</a>
</div>
Remove the first block of code body{background-color:#49C34F}
Related
I have a very basic question, which will help me understanding the CSS entirely,I believe. Below is the CSS and HTML for my code.
.vl {
border-left: 6px solid yellow;
height: 100px;
margin-bottom: none;
}
.circle {
border: 2px solid #666666;
border-radius: 100%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 0.6;
-webkit-box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
width: 17px;
height: 17px;
z-index: 86;
margin-left: -7px;
-webkit-transition: background-color .5s ease-in-out;
-moz-transition: background-color .5s ease-in-out;
-o-transition: background-color .5s ease-in-out;
-ms-transition: background-color .5s ease-in-out;
transition: background-color .5s ease-in-out;
}
<div class="vl"></div>
<div class="circle" />
<div class="vl" style="margin-top: 18px; margin-left: 4.8px;"></div>
Now, the results appear like this:
After that When I add another circle div <div class="circle"/>. Results looks like this:
I have two queries based upon my results:
Why my second circle didnt appear in the same margins to the left as the first one? I am using same css.
How do we create elements like circles or lines, that whenever we use them they perfectly aligns to the elements next to them automatically. I have seen this but never gets it.
Please refer to image below:
,
as soon as I'm adding more divs of same classes, it looses its colors, the colors are getting lighter.
This is happening to you because you have used an invalid HTML tag. <div /> is not a valid tag whereas you should have used <div></div>.
Follow this MDN web docs link to find the actual use cases:
Tag omission: None, both the starting and ending tag are mandatory.
When you correct this problem, all the classes you will declare, and how many times you call them, that doesn't matter, all of them will have same styling, like- in your case, same margin, no color fading, etc. Try it out:
.vl {
border-left: 6px solid yellow;
height: 100px;
margin-bottom: none;
}
.circle {
border: 2px solid #666666;
border-radius: 100%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 0.6;
-webkit-box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
width: 17px;
height: 17px;
z-index: 86;
margin-left: -7px;
}
<h2>Vertical Line</h2>
<div class="vl"></div>
<div class="circle"></div>
<div class="vl"></div>
<div class="circle"></div>
<div class="vl"></div>
<div class="circle"></div>
<div class="vl"></div>
<div class="circle"></div>
I'm working to build a button styling where when the user hovers over a button, the button moves up 2 pixels. I have that working with the following on hover:
`transform: translateY(-2px);`
The problem is, if you move your mouse right under the button, the button starts to move but and the button now bounces/jumps from normal to active causing button jumpies.
Any idea on how I can implement the button moving up 2 pixels on hover but without the jumpies when the mouse is near the edge of the button?
.ui.button {
outline: none;
height: 48px;
font-weight: 500;
font-size: 17px;
line-height: 20px;
padding-top: 12.5px;
padding-bottom: 12.5px;
color: #fff;
background: green;
border: 1.5px solid darkGreen;
box-shadow: 0 2px rgba(6,164,105,.25);
transition: transform .1s ease-in-out,box-shadow .1s ease-in-out,-webkit-transform .1s ease-in-out,-webkit-box-shadow .1s ease-in-out;
}
.ui.primary.button:hover {
transform: translateY(-2px);
background: green;
border-color: darkGreen;
box-shadow: 0 4px rgba(6,164,105,.25);
}
<button class="ui medium primary button button-icon-with-text " role="button" style="margin-bottom: 0px;">Primary Button</button>
Similarly to Temani Afif's anwser, I would use a pseudo-element that's 2px longer than the element, but switching the overflow from hidden to visible on hover.
.ui.button {
position:relative; overflow:hidden;
outline: none;
height: 48px;
font-weight: 500;
font-size: 17px;
line-height: 20px;
padding-top: 12.5px;
padding-bottom: 12.5px;
color: #fff;
background: green;
border: 1.5px solid darkGreen;
box-shadow: 0 2px rgba(6,164,105,.25);
transition: transform .1s ease-in-out,box-shadow .1s ease-in-out,-webkit-transform .1s ease-in-out,-webkit-box-shadow .1s ease-in-out;
}
.ui.primary.button::after{
content:"";
position:absolute;
top:0; left:0;
width:100%;
height:calc(100% + 3.5px); /* translate + bottom border height*/
}
.ui.primary.button:hover {
overflow:visible;
transform: translateY(-2px);
background: green;
border-color: darkGreen;
box-shadow: 0 4px rgba(6,164,105,.25);
}
<button class="ui medium primary button button-icon-with-text " role="button" style="margin-bottom: 0px;">Primary Button</button>
An idea is to use a pseudo-element that will cover the space under button after the translation and you will avoid this effect. So it's like you simply increase the total height of your element instead of translating it.
.ui.button {
position:relative;
outline: none;
height: 48px;
font-weight: 500;
font-size: 17px;
line-height: 20px;
padding-top: 12.5px;
padding-bottom: 12.5px;
color: #fff;
background: green;
border: 1.5px solid darkGreen;
box-shadow: 0 2px rgba(6,164,105,.25);
transition: transform .1s ease-in-out,box-shadow .1s ease-in-out,-webkit-transform .1s ease-in-out,-webkit-box-shadow .1s ease-in-out;
}
.ui.button:after {
content:"";
position:absolute;
bottom:0;
right:0;
left:0;
height:0;
}
.ui.primary.button:hover {
transform: translateY(-2px);
background: green;
border-color: darkGreen;
box-shadow: 0 4px rgba(6,164,105,.25);
}
.ui.primary.button:hover:after {
content:"";
height:2px;
bottom:-3.5px; /* Don't forget the border !*/
}
<button class="ui medium primary button button-icon-with-text " role="button" style="margin-bottom: 0px;">Primary Button</button>
Another idea is to use a container for the button on where you apply the hover. This will work with any value of transalation and you avoid doing calculation to find the values of the pseudo-element:
.ui.button {
position: relative;
outline: none;
height: 48px;
font-weight: 500;
font-size: 17px;
line-height: 20px;
padding-top: 12.5px;
padding-bottom: 12.5px;
color: #fff;
background: green;
border: 1.5px solid darkGreen;
box-shadow: 0 2px rgba(6, 164, 105, .25);
transition: transform .1s ease-in-out, box-shadow .1s ease-in-out, -webkit-transform .1s ease-in-out, -webkit-box-shadow .1s ease-in-out;
}
.contain {
display: inline-block;
}
.contain:hover .ui.primary.button {
transform: translateY(-2px);
background: green;
border-color: darkGreen;
box-shadow: 0 4px rgba(6, 164, 105, .25);
}
<div class="contain">
<button class="ui medium primary button button-icon-with-text " role="button" style="margin-bottom: 0px;">Primary Button</button>
</div>
I am having an issue getting a text input box to work correctly on Chrome. It works as it should in Firefox; however, in Chrome it is completely unresponsive. It does not display the hover effect or even allow you to type into the box. My first thought was I am missing a webkit, but I am not sure which one. (I am fairly new to CSS/html). See the code I am using below:
As you can see, it works as it should if you run the snippet.
input[type="text"] {
display: block;
margin: 0;
width: 60%;
font-family: arial;
font-size: 12px;
color: #e2e2e2;
appearance: none;
box-shadow: none;
border-radius: none;
}
input[type="text"]:focus {
outline: none;
}
.promocode input[type="text"] {
padding: 10px;
margin-left: 1px;
border: solid 0px #2c303b;
background-color: rgba(74, 80, 99, .5);
transition: box-shadow 0.3s, border 0.3s;
transition: background-color 0.3s ease-in-out;
-webkit-transition: box-shadow 0.3s, border 0.3s;
-webkit-transition: background-color 0.3s ease-in-out;
-moz-transition: box-shadow 0.3s, border 0.3s;
-moz-transition: background-color 0.3s ease-in-out;
-o-transition: box-shadow 0.3s, border 0.3s;
-o-transition: background-color 0.3s ease-in-out;
}
.promocode:hover input[type="text"] {
background-color: rgba(74, 80, 99, .8);
}
.promocode input[type="text"]:focus,
.promocode input[type="text"].focus {
border: solid 0px #2c303b;
box-shadow: 0 0 4px 1px rgba(0, 0, 0, .25);
}
<div id="promoMsgPane" class="alignLeft" style="font-size: 12px; text-align:left; padding-top: 2em; margin-left: 0px;">
<p style="margin-bottom: 15px;">Enter your promo code below</p>
</div>
<div id="PromoIDPane">
<div class="input-list promocode clearfix">
<input id="txtPromoID" placeholder="Enter code" type="text" />
</div>
</div>
Shadows work properly on all elements, on IE and Firefox, but not for the button element in Chrome and Safari:
http://jsfiddle.net/q8xaa/
<button class="btn-test">
<span class="btn">test</span>
</button>
.btn-test {
background-color: transparent;
border: 0;
padding: 0px;
}
.btn-test:hover .btn {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.btn-test .btn {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
-webkit-box-shadow: 4px 4px 0px #000;
-moz-box-shadow: 4px 4px 0px #000;
box-shadow: 4px 4px 0px #000;
background-color: #f00;
margin: 0px;
padding: 10px;
height: 40px;
display: inline-block;
}
button {
margin: 0;
padding: 0;
border: 0;
overflow: visible;
}
Any ideas on how to solve?
Example http://jsfiddle.net/H23Jy/1/
I tried forcing a zero CSS3 transformation as shown below
CSS
button span {
-webkit-transform: translate3d(0,0,0);
}
and the shadow seems to work fine also on Chrome 35.
But as you can see, in that way the button is not vertically aligned with the other buttons, so you could use -webkit-transform: translateY(-3px); instead
Result
I am trying to have a hover effect on a div so that the div containing the image moves up on hover. I want the "polaroid" div to move up on hover. This effect works if i just apply the hover class to the img but not the whole div. Please help. Fiddle here
Markup:
<div id="home-gal-col"> <span class="span-homegal">
<a href="/listings/category/accessories/">
<div class="polaroid">
<img src="/images/homegal/picture.jpg">
<p>picture</p>
</img>
</div>
</a>
</span>
</div>
Css:
#home-gal-col {
width:15%;
float:left;
padding:5px;
}
.polaroid {
border: 10px solid #fff;
border-bottom: 15px solid #fff;
-webkit-box-shadow: 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px #777;
box-shadow: 3px 3px 3px #777;
}
.polaroid img {
margin: 0 auto;
width: 100%;
}
.polaroid p {
text-align: center;
color: #D51386;
}
.span-homegal a {
-webkit-transition: margin 0.2s ease-out;
-moz-transition: margin 0.2s ease-out;
-o-transition: margin 0.2s ease-out;
}
.span-homegal a:hover {
margin-bottom: 5px;
}
Is this what you are looking for?
.polaroid:hover{
margin-top: -10px;
}
You can also add the CSS 3 animation adding the transition properties on the .polaoid class:
.polaroid {
border: 10px solid #fff;
border-bottom: 15px solid #fff;
-webkit-box-shadow: 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px #777;
box-shadow: 3px 3px 3px #777;
-webkit-transition: margin 0.2s ease-out;
-moz-transition: margin 0.2s ease-out;
-o-transition: margin 0.2s ease-out;
transition: margin 0.2s ease-out;
}
Living example: http://jsfiddle.net/txgvh/2/