Related
Problem
I'm creating a dropdown menu based on this codepen for my website and I'm trying to isolate the dropdown menu for just a button, within the same div. The code is working for a single button, but when ther's two or more, they all share the same dropdown... Here's an example.
▲ This is the button with the dropdown, it works
▲ But the second button, within the same DIV, also gets the same dropdown...
I believe it's something related to position:absolute, because it's somewhat better when I remove it (but the dropdown position also go to the div).
What I've tried
I was expecting this dropdown menu to be only for an ID, e.g. translate. But when I add the dropdown, it works for all buttons inside the same container div, which I do not want.
This is the code which I have tried:
/* Page settings */
.page-settings {
#include flex-center;
position: fixed;
flex-direction: row;
z-index: 10;
top: 3vw;
right: 2vw;
.btn {
#include flex-center;
#include ease-in-out;
width: min(10vw, 80px);
aspect-ratio: 1 / 1;
border-radius: 50%;
margin: 0 4%;
background-color: var(--color-grey-4);
border: none;
box-shadow: var(--box-shadow-1);
i {
font-size: var(--size-button);
color: var(--color-grey-1);
pointer-events: none;
}
&:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px var(--color-white);
}
}
}
#translate {
&:focus,
&:active {
.dropdown {
transform: translate(0, 20px);
opacity: 1;
visibility: visible;
}
}
.material-icons {
border-radius: 100%;
animation: ripple 0.6s linear infinite;
}
.dropdown {
position: absolute;
top: 100%;
left: 0;
background: #fff;
width: 100%;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(#000, .1);
text-align: left;
opacity: 0;
visibility: hidden;
&:before {
content: '';
position: absolute;
top: -6px;
left: 20px;
width: 0;
height: 0;
box-shadow: 2px -2px 6px rgba(#000, .05);
border-top: 6px solid #fff;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
border-left: 6px solid transparent;
transform: rotate(-45deg);
mix-blend-mode: multiple;
}
li {
z-index: 1;
position: relative;
background: #fff;
padding: 0 20px;
color: #666;
&:first-child {
border-radius: 4px 4px 0 0;
}
&:last-child {
border-radius: 0 0 4px 4px;
a {
border-bottom: 0;
}
}
}
a {
display: block;
border-bottom: 1px solid rgba(#000, .05);
padding: 16px 0;
color: inherit;
font-size: 10px;
text-decoration: none;
}
}
}
#media screen and (max-width: 600px) {
.page-settings {
flex-direction: column;
.btn {
margin: 7% 2%;
}
}
}
The minimal working code is below:
body {
background: #f5f5f5;
height: 100%;
color: rgba(0, 0, 0, 0.87);
font-family: "Roboto", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.5em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn {
outline: 0;
display: inline-flex;
align-items: center;
justify-content: space-between;
background: #5380f7;
min-width: 260px;
border: 0;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
padding: 16px 20px;
color: #fff;
font-size: 12px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
overflow: hidden;
cursor: pointer;
}
.btn:focus .dropdown,
.btn:active .dropdown {
transform: translate(0, 20px);
opacity: 1;
visibility: visible;
}
.btn .material-icons {
border-radius: 100%;
-webkit-animation: ripple 0.6s linear infinite;
animation: ripple 0.6s linear infinite;
}
.btn .dropdown {
position: absolute;
top: 100%;
left: 0;
background: #fff;
width: 100%;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
text-align: left;
opacity: 0;
visibility: hidden;
transition: 0.3s ease;
}
.btn .dropdown:before {
content: "";
position: absolute;
top: -6px;
left: 20px;
width: 0;
height: 0;
box-shadow: 2px -2px 6px rgba(0, 0, 0, 0.05);
border-top: 6px solid #fff;
border-right: 6px solid #fff;
border-bottom: 6px solid rgba(0, 0, 0, 0);
border-left: 6px solid rgba(0, 0, 0, 0);
transform: rotate(-45deg);
mix-blend-mode: multiple;
}
.btn .dropdown li {
z-index: 1;
position: relative;
background: #fff;
padding: 0 20px;
color: #666;
}
.btn .dropdown li.active {
color: #5380f7;
}
.btn .dropdown li:first-child {
border-radius: 4px 4px 0 0;
}
.btn .dropdown li:last-child {
border-radius: 0 0 4px 4px;
}
.btn .dropdown li:last-child a {
border-bottom: 0;
}
.btn .dropdown a {
display: block;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
padding: 16px 0;
color: inherit;
font-size: 10px;
text-decoration: none;
}
#-webkit-keyframes ripple {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1),
0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1),
0 0 0 60px rgba(255, 255, 255, 0.1);
}
100% {
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1),
0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1),
0 0 0 80px rgba(255, 255, 255, 0);
}
}
#keyframes ripple {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1),
0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1),
0 0 0 60px rgba(255, 255, 255, 0.1);
}
100% {
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1),
0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1),
0 0 0 80px rgba(255, 255, 255, 0);
}
}
<div class="container">
<!-- Btn-->
<button class="btn">
<span>Account Settings</span><i class="material-icons">public</i>
<ul class="dropdown">
<li class="active">Profile Information</li>
<li>Change Password</li>
<li>
Become <b>PRO</b>
</li>
<li>Help</li>
<li>Log Out</li>
</ul>
</button>
<button class="btn">
<span>Account Settings</span><i class="material-icons">public</i>
<ul class="dropdown">
<li class="active">Profile Information</li>
<li>Change Password</li>
<li>
Become <b>PRO</b>
</li>
<li>Help</li>
<li>Log Out</li>
</ul>
</button>
</div>
My Research
I tried to create a new class called .dropdown-menu too, to no avail. Tried changing the position absolute and top+Left positioning to a mix between grid and grid-area, but I couldn't get it to work too.
I've googled it, searched websites and the answers are various, but didn't fit the scope of my problem.
Question
How could I isolate this dropdown-menu with two buttons under the same container?
Thanks!
It just needed a new :has() element on buttons, button:has(.dropdown). The fix was:
button:has(.dropdown) {
&:focus,
&:active {
.dropdown {
transform: translate(0, 20px);
opacity: 1;
visibility: visible;
}
}
}
Don't know why the id selector didn't work, but this way, it's working just fine.
Sorry there isn't more code on this. I am new and stumped to be honest.
I have a CSS Button I am using on my webpage, code below. I'd like to put an image around the button like below... Slightly off center,behind the button itself, and which is mobile responsive.
.redbutton {
display: inline-block;
outline: none;
cursor: pointer;
margin: 10px auto 10px auto;
padding: 15px 6px 15px 6px;
font-size: 27px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
cursor: pointer;
cursor: hand;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
color: #faddde;
border: solid 1px #980c10;
background: #d81b21;
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.largebuttonwidthC {
width: 60%;
}
<div class="redbutton largebuttonwidthC">SHOW ME HOW</div>
The circle image is here:
And I'd like it to look like this:
However, I cannot seem to figure out how to do this.
Thanks,
Alex
.contain {
background: url(https://i.stack.imgur.com/Nb7M7.png);
background-repeat: no-repeat;
width: 60%;
background-size: cover;
}
.redbutton {
display: inline-block;
outline: none;
cursor: pointer;
margin: 10px auto 10px auto;
padding: 15px 6px 15px 6px;
font-size: 27px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
cursor: pointer;
cursor: hand;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
color: #faddde;
border: solid 1px #980c10;
background: #d81b21;
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.largebuttonwidthC {
width: 60%;
margin-left: 50%;
transform: translateX(-50%);
}
<div class="contain">
<div class="redbutton largebuttonwidthC">SHOW ME HOW</div>
</div>
First, you should clean your CSS and optimize it by not duplicating arguments such as "cursor: pointer", which you ca find two times in the code, also the "outline: none" should only be when the button is focused or active.
Either way, to put an image in the background you should do something similar to :
<button class="my_button" type="">My amazing button</button>
.my_button {
/*height, width, color...*/
background-image: url(img/my_img.png);
/* You can even move the image in the background to better suit your needs*/
background-position-y:-50px; /* Move the image on the Y axes*/
background-position-x: 10px; /* Move the image on the X axes*/
background-size: cover;
}
Try to something like this.
.redbutton {
display: inline-block;
outline: none;
cursor: pointer;
margin: 10px auto 10px auto;
padding: 15px 6px 15px 6px;
font-size: 16px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
cursor: pointer; cursor: hand;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
background: url(https://i.stack.imgur.com/Nb7M7.png) no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.largebuttonwidthC{
width: 535px;
min-height:150px;
}
.redbutton p{
background-color: yellow;
height: 35px;
border: 1px solid yellow;
width: 470px;
padding-top: 10px;
}
<div class="redbutton largebuttonwidthC">
<p>Click Here to instantly Download this file</p>
</div>
Not perfect but I guess you will see the idea behind: See this fiddle
.redbutton {
display: inline-block;
z-index: 10;
position: relative;
outline: none;
cursor: pointer;
margin: 0 50px;
padding: 15px 6px 15px 6px;
font-size: 27px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
cursor: pointer;
cursor: hand;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
color: #faddde;
border: solid 1px #980c10;
background: #d81b21;
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.largebuttonwidthC {
width: 300px;
}
.container {
position: relative;
margin: 50px;
}
.image {
content: "";
position: absolute;
left: -40px;
right: 0;
bottom: 0;
top: -30px;
background: url('https://i.stack.imgur.com/Nb7M7.png') no-repeat;
z-index: 0;
width: 512px;
height: 90px;
}
<div class="container">
<div class="redbutton largebuttonwidthC">SHOW ME HOW</div>
<span class="image"></span>
</div>
https://jsfiddle.net/nf7b2zx1/
.redbutton {
display: inline-block;
outline: none;
cursor: pointer;
margin: 10px auto 10px auto;
padding: 15px 6px 15px 6px;
font-size: 27px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
cursor: pointer;
cursor: hand;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
;
color: #faddde;
background: #d81b21;
background: url(https://i.stack.imgur.com/Nb7M7.png) no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.largebuttonwidthC {
width: 100%;
min-height: 70px
}
<div class="redbutton largebuttonwidthC">IAM TEXT</div>
change the buttons background to that blue circle
background-image: url(you img here...);
With a bit of CSS you can get something similar
.redbutton:before {
content: '';
position:absolute;
left:-20px;
right:-20px;
top:-20px;
bottom:-20px;
background-image: url('https://i.stack.imgur.com/Nb7M7.png');
background-size: 100% 100%;
}
Hopefully somebody can help me with my issue.
I'm trying to make my own website, but when I try to move one of the three individual boxes(see picture), all three of them move. three boxes issue
[The same issue also happens with the social icons box but I'm less concerned with that section]
I'm hoping someone can take a look at the code and hopefully tell me where I've gone wrong.
My Website Files
You have put position:block in your css. There is no position:block in css. You have to use display property to that. I have change your box div's css to display: inline-block; and made few changes in width too.(using calc).
#import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Source+Sans+Pro');
#import url('https://fonts.googleapis.com/css?family=Poppins');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image: url(../css/images/background/backgroundimage.jpg);
}
/* HEADERBAR */
div#headerbar {
width: 100%;
height: 50px;
display: inline-block;
background-color: rgba(237,87,82, 0.65);
font-family: 'Source Sans Pro', sans-serif;
box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 2px #000000;
-webkit-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-moz-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-o-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
}
.leftlogo {
float: left;
margin-top: 12px;
margin-left: 15px;
color: #fff;
text-shadow: 1px 1px 1px #000;
font-size: 20px;
font-family: 'roboto+condensed', sans-serif;
}
.leftlogo span {
font-weight: 300;
color: rgba(237, 87, 82, 0.8);
font-size: 20px;
font-family: 'roboto', sans-serif;
}
.version {
float: right;
margin-top: 14px;
margin-right: 10px;
}
/* CODE TEST */
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 21px/40px;
background-clip: padding-box;
text-align: center;
}
.button {
margin-top: 10px;
font-size: 1em;
padding: 14px;
color: #fff;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
font-family: 'Source Sans Pro', sans-serif;
}
.button:hover {
background: rgba(255, 255, 255, 0.3);
border: 3px solid #000;
}
.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: #000;
border-radius: 5px;
border: 5px solid #126b72;
width: 70%;
position: relative;
transition: all 5s ease-in-out;
color: #fff;
font-family: 'Roboto Condensed', sans-serif;
}
.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: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
div#updatesbox {
width: 900px;
height: 40px;
background-color: #000;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 2px #000000;
}
.updatesbox1 {
width: 443px;
height: 30px;
background-color: rgba(255, 255, 255, 0.2);
display:inline-block;
margin-top: 5px;
margin-left: 5px;
box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 2px #000000;
-webkit-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-moz-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-o-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
}
.updatesbox2 {
width: 443px;
height: 30px;
background-color: rgba(255, 255, 255, 0.2);
float: right;
display: inline-block;
margin-top: 5px;
margin-right: 5px;
box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 2px #000000;
-webkit-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-moz-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-o-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
}
.twitter {
float: left;
margin-top: 7px;
margin-left: 40px;
}
.tweet {
color: white;
}
.facebook a {
color: rgba(273, 87, 84, 1);
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
.facebookicon {
margin-left: 5px;
margin-top: 7px;
}
.steam a {
color: rgba(273, 87, 84, 1);
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
.steamicon {
margin-left: 5px;
margin-top: 7px;
}
.instagram a {
color: rgba(273, 87, 84, 1);
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
.instaicon {
margin-left: 5px;
margin-top: 7px;
}
.tweet a {
color: rgba(237, 87, 84, 1);
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
/* ALTERNATING TEXT */
#tickertape{
display: block;
margin-left: 600px;
margin-right: auto;
margin-top: 14.5px;
text-align: center;
width:400px;
height:20px;
}
.tickertape {
display: block;
margin-top: 6px;
margin-left: 20px;
margin-right: auto;
color: #000;
}
#subtickertape{
position:absolute;
width:443px;
height:20px;
}
.subtickertapefont{
font:bold 12px Verdana;
text-decoration:none;
color: rgba(237, 87, 84, 0.6);
text-shadow: 2px 2px 2px #000;
}
.subtickertapefont a{
color:white;
text-decoration:none;
}
/* BODY CONTAINER BOX */
div#bodycontainer {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
background-color: rgba(237, 87, 84, 0.3);
width: 90%;
height: 800px;
border: 2px dashed #000;
}
#bodycontainer #insidebox {
display: inline-block;
float: left;
width: calc(32.3% - 7.5px);
height: 500px;
margin: 15px;
margin-top: 70px;
background: rgba(237, 87, 84, 0.2);
border: 2px dashed #000;
}
#bodycontainer #centerbox {
display: inline-block;
float: left;
width: calc(32.3% - 7.5px);
height: 400px;
margin: auto;
margin-top: 200px;
background: rgba(255, 255, 255, 0.2);
border: 2px dashed #000;
}
#rightbox {
display: inline-block;
float: left;
width: calc(32.3% - 7.5px);
height: 710px;
margin: auto;
margin-top: 0px;
background: rgba(237, 87, 84, 0.2);
border: 2px dashed #000;
margin-left: 15px !important;
}
change your stylesheet.css to this and then you can move each box individually. Hope this helps you.
I have div that have box-shadow on it and have also div:hover box-shadow.
When i check results at JSfiddle its all fine.
But when i check the results at my site i get the box-shadow right side removed:
Here is the Live code: JSfiddle
And here is the Code:
.nitz {
font-family: sans-serif;
font-size: 0;
width: 300px;
height: 76px;
direction: rtl;
background-color: #e4e5e8;
border-radius: 5px;
display: block;
box-shadow: inset rgba(255, 255, 255, 0.75) 0px 0px 0px 1000px,
inset rgba(255, 255, 255, 0.6) 0px 1px 0px,
inset rgba(255, 255, 255, 0.4) 0px 0px 0px 1px,
rgba(0, 0, 0, 0.2) 0px 1px 3px;
}
.nitz:hover {
-webkit-box-shadow: 0px 0px 5px 6px rgba(251, 219, 90, 1);
-moz-box-shadow: 0px 0px 5px 6px rgba(251, 219, 90, 1);
box-shadow: 0px 0px 5px 6px rgba(251, 219, 90, 1);
background-color: #f8f8f9;
box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.boxtitle1 {
font-weight: bold;
text-align: right;
font-size: 14px;
padding-bottom: 3px;
}
.boxtitle2 {
text-align: right;
font-size: 14px;
}
.Cellbox2 {
display: inline-block;
margin-right: 15px;
margin-bottom: 15px;
vertical-align: top;
margin-top: 20px;
}
<a href="https://www.google.com" rel="">
<div class="nitz">
<div class="Cellbox2">
<div class="boxtitle1">That is a big test</div>
<div class="boxtitle2">That is a small one</div>
</div>
</div>
</a>
The over Divs are:
ipsWidget ipsWidget_vertical ipsBox
ipsWidget ipsWidget_vertical ipsBox
and
ipsList_reset
above all that divs.
The css of that divs are:
/* Blocks - styles for various widgets */
.ipsWidget {
position: relative;
padding: 0;
background: #fff;
}
.ipsWidget.ipsWidget_vertical {
margin-top: 15px;
}
.ipsWidget.ipsWidget_vertical .ipsWidget_title {
padding: 10px;
margin: 0;
font-size: 14px;
font-weight: 400;
position: relative;
color: #fff;
background: {theme="widget_title_bar"};
border-radius: 2px 2px 0px 0px;
}
.ipsWidget_inner{
padding: 10px;
}
.ipsWidget.ipsWidget_vertical .ipsWidget_inner {
color: #575757;
}
.ipsWidget.ipsWidget_horizontal {
padding: 0 0 10px 0;
}
.ipsWidget.ipsWidget_horizontal:not( .ipsWidgetHide ) + .ipsWidget {
margin-top: 10px;
}
.ipsWidget.ipsWidget_horizontal .ipsWidget_title {
font-weight: 400;
margin-bottom: 10px;
background: #f5f5f5;
padding: 10px;
}
.ipsWidget.ipsWidget_vertical .ipsWidget_inner {
color: #575757;
}
.ipsWidget.ipsWidget_horizontal .ipsTabs {
margin: -5px 0 5px 0;
}
.ipsWidget.ipsWidget_horizontal .ipsTabs_panel {
background: #fff;
margin: 0;
}
.ipsWidget_columns > [class*="ipsGrid"] {
margin-bottom: 0;
border-bottom: 0;
}
html[dir="ltr"] .ipsWidget_columns > [class*="ipsGrid"] {
border-right: 1px solid rgba(0,0,0,0.1);
padding-right: 10px;
}
html[dir="rtl"] .ipsWidget_columns > [class*="ipsGrid"] {
border-left: 1px solid rgba(0,0,0,0.1);
padding-left: 10px;
}
html[dir="ltr"] .ipsWidget_columns > [class*="ipsGrid"]:last-child {
border-right: 0;
}
html[dir="rtl"] .ipsWidget_columns > [class*="ipsGrid"]:last-child {
border-left: 0;
}
.ipsWidget_horizontal .ipsWidget_statsCount {
font-size: 22px;
line-height: 32px !important;
font-weight: 300;
}
.ipsWidget_horizontal .ipsWidget_stats {
margin-top: 15px;
}
.ipsWidget .ipsTabs_small {
padding: 0;
background: transparent;
}
.ipsWidget .ipsTabs_small .ipsTabs_item:not( .ipsTabs_activeItem ) {
color: rgba(50,50,50,0.6);
border-bottom: 1px solid transparent;
}
.ipsWidget .ipsTabs_small .ipsTabs_activeItem {
border-bottom: 1px solid rgba(0,0,0,0.25);
}
.ipsWidget .ipsDataItem_title {
font-size: 13px;
}
.ipsWidget.ipsWidget_primary {
background: #262e33;
}
.ipsWidget.ipsWidget_primary h3 {
color: #fff;
}
html[dir="ltr"] .ipsWidget_latestItem {
margin-left: 85px;
}
html[dir="rtl"] .ipsWidget_latestItem {
margin-right: 85px;
}
.ipsWidgetBlank {
margin-top: 16px;
padding-top: 30px;
}
I'm pretty sure the problem does not come from the code you linked.
Rather i guess that your button is on the border of a overflow : hidden div and the shadow falls outshide that div.
Or there is another invisible div beside the button hidding the shadow.
Look at that snippet and notice why part of the shadow doesn't show : The button is on the top right corner of the parent (".test") div.
I cannot check your code but i guess the problem comes from a parent div (maybe because you haven't fixed a width and it is stopping right after the button)
.test {
display: block
width: 400px;
height: 200px;
overflow: hidden;
}
.nitz {
font-family:sans-serif;
font-size: 0;
float: right;
width:300px;
height:76px;
direction:rtl; background-color:#e4e5e8;border-radius: 5px;
display:block;
box-shadow: inset rgba(255,255,255,0.75) 0px 0px 0px 1000px,
inset rgba(255,255,255,0.6) 0px 1px 0px,
inset rgba(255,255,255,0.4) 0px 0px 0px 1px, rgba(0,0,0,0.2) 0px 1px 3px;
}
.nitz:hover {-webkit-box-shadow: 0px 0px 5px 6px rgba(251,219,90,1);
-moz-box-shadow: 0px 0px 5px 6px rgba(251,219,90,1);
box-shadow: 0px 0px 5px 6px rgba(251,219,90,1);
background-color:#f8f8f9;
box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.boxtitle1 {font-weight: bold;text-align:right; font-size:14px; padding-bottom:3px;}
.boxtitle2 {text-align:right; font-size:14px;}
.Cellbox1
{width:50px; height:50px; display:inline-block; margin-bottom:15px; margin-right:15px; margin-top:15px; }
.Cellbox2
{display:inline-block; margin-right:15px; margin-bottom:15px; vertical-align:top; margin-top:20px;}
<div class="test">
<a href="https://www.google.com" rel="">
<div class="nitz">
<div class="Cellbox2">
<div class="boxtitle1">That is a big test</div>
<div class="boxtitle2">That is a small one</div>
</div>
</div>
</a>
</div>
You can add some padding to the parent "anchor" tag with some classname
.some-class-name {
padding: 0 15px;
display: inline-block;
box-sizing: border-box;
}
I want to show my button in Mozilla like Chrome so please help me what will I do for it.
This is my code.
CSS:
.green {
background: linear-gradient(to bottom, #9CD645 0%, #8AC530 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #82B436;
}
.large {
font-size: 18px;
}
.btn {
border: 1px solid #82B436;
border-radius: 25px;
box-shadow: 0 1px rgba(99, 159, 8, 0.35);
color: #508400;
display: inline-block;
font-weight: bold;
padding: 3px 12px;
text-decoration: none;
text-transform: uppercase;
}
.green {
background-color: #8CC63F;
}
.btn span {
background: url("images/icon_arrows.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: block;
float: right;
height: 18px;
margin: 5px;
width: 18px;
}
HTML:
<a href="smoodees" class="btn large green">
Check out our Smoodees
<span></span>
</a>
Checkout this fiddle:
http://jsfiddle.net/realdeepak/gvC9z/1/
or For browser compatibility in firefox, you can use css hack like this:
#-moz-document url-prefix() {
.large {
font-size: 17px;
}
}
Or Try this, And fix minor css padding alignment as per your screen:
<style type="text/css">
.green {
background: linear-gradient(to bottom, #9CD645 0%, #8AC530 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #82B436;
}
.large {
font-size: 18px;
}
.btn {
border: 1px solid #82B436;
border-radius: 25px;
box-shadow: 0 1px rgba(99, 159, 8, 0.35);
color: #508400;
display: inline-block;
font-weight: bold;
padding: 3px 30px 3px 10px;
text-decoration: none;
text-transform: uppercase;
position: relative;
}
.green {
background-color: #8CC63F;
}
.btn span {
background: url("images/icon_arrows.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
height: 18px;
margin: 5px;
width: 18px;
position: absolute;
top: 0;
right: 0;
}
</style>
Changing the answer completely.
Try this structure:
<a href="smoodees" class="btn large green">
<p id="text">Check out our Smoodees</p>
<span></span>
</a>
and change the CSS like so:
#id{
float: left
}
span{
float: left
}
edit: For multiple buttons, change the ID to a Class