I tried to create a CSS effect button ditto same as below I provide image, (ignore icons) But try but not getting same like results is there any way to create a perfect same CSS button?
[![enter image description here][1]][1]
here is my button code below
of my HTML button
.my-bt{
display:block;
position:relative;
background: linear-gradient(310deg, #dcb7e0, #dbdaef);
padding:10px;
text-align:center;
border-radius:10px;
}
<div class='my-bt'>Hello World</div>
Please Help me to create 101% Same ditto button
[1]: https://i.stack.imgur.com/omwyj.jpg
Can you please check the below code? Hope it will work for you. We have used multiple box-shadow as per your requirements.
Please refer to this link: https://jsfiddle.net/yudizsolutions/ry2sqpue/
for more reference you may use the link also: https://codepen.io/yudizsolutions/pen/mdrKdVa
body {
background-color: #f1f0f5;
}
.my-bt {
background-color: #fff;
box-shadow: 6px 6px 18px 0 #e3deed, -6px -6px 18px 0 rgb(255, 255, 255, 0.5);
margin: 20px 10px;
padding: 25px;
border-radius: 25px;
text-align: center;
}
<div class="my-bt">
Hello World
</div>
Related
I have the following CSS rule
#class {
margin: 4px 5px 6px 7px;
color: red;
}
What I usualy do is
document.getElementById('class').style.margin= '0px';
Then after doing that to reset I go the same step
document.getElementById('class').style.margin= '4px 5px 6px 7px';
How do I disable the margin using JavaScript\JQuery instead of changing the value to 0 then reset it to 4px 5px 6px 7px
The easiest solution here is to use classes, and use jquery or javascript to change the class of the element whenever you want different behavior as on button click in the example I have shown below.
$("#add").click(function() {
$("#exd").addClass('margin');
$("#exd").removeClass('no-margin');
});
$("#rem").click(function() {
$("#exd").removeClass('margin');
$("#exd").addClass('no-margin');
});
.no-margin {
margin: 0px;
}
.margin {
margin: 15px 15px 15px 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="exd">Example Div</div>
<button id="add">Add margin</button>
<button id="rem">Remove margin</button>
Hope this is clear.
Can you make a second class and just add/remove it from your elements?
.margin {
margin: 4px 5px 6px 7px;
color: red;
}
.noMargin {
margin: 0px
color: red;
}
document.getElementById("class").classList.add('margin');
document.getElementById("class").classList.remove('noMargin');
document.getElementById("class").classList.add('noMargin');
document.getElementById("class").classList.remove('margin');
A slight alteration to Scath's answer
.margin {
margin: 4px 5px 6px 7px;
color: red;
}
.margin.noMargin {
margin: 0px;
}
Then all you have to do is add/remove the noMargin class. More specific css rules take precedence.
The other answers are good, just wanted to share another way of doing this. You can keep your base CSS style rule:
#class {
margin: 4px 5px 6px 7px;
color: red;
}
And then add a noMargin class as others have suggested:
.noMargin {
margin: 0; !important
}
And then, use toggleClass to switch it on/off:
document.getElementById('class').classList.toggleClass('noMargin');
The benefit here is that A) only one line of code to on/off the margin, B) only one extra CSS rule, and C) don't have to worry about whether the margin is currently on or off before switching it.
I will specify. I have this rather simple website, on which I have three button/links which I made to diplay (with a little magic of JS) within one of it's elements (section with id "content"). It works fine and all but (and it's a big one) for some reason it only display it in a tiny window in a upper-left corner with like a scroll down bar and I can't make it to occupy the entire 'section'.
JS I've got is:
function load_projects() {
document.getElementById("content").innerHTML='<object type="text/html" data="projects.html" ></object>';
}
and an element :
<section class="box sect shadow" id="content">
</section>
css for it:
.box {
background-color: #D3D3D3;
width: 1000px;
height: 600px;
margin-right: 20%;
margin-left: 20%;
margin-top: 20px;
border-radius: 20px;
}
.sect {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.shadow {
-webkit-box-shadow: 10px 11px 31px -2px rgba(120,124,125,0.61);
-moz-box-shadow: 10px 11px 31px -2px rgba(120,124,125,0.61);
box-shadow: 10px 11px 31px -2px rgba(120,124,125,0.61);
}
So to summerise: I have a 'nav' element with three button/links that are being displayed within 'section' element, but instesd of occupying the whole surface of 'section' links are being displayed in a tiny, scroll-down window.
what am I doing wrong? How can I fix it?
You've not specified any styles for the object that you're adding, so it doesn't know to fill the container element.
Add the following css...
#content object {
height: 100%;
width: 100%;
}
Hi im a pretty new coder using flippy.js and when my navigation button is clicked i want the div to flip but stay the same color/opacity once the flip has been executed but have new content within it(already achieved that), so it begins the flip fine, but then dissappears midway, i have tried a few different methods like onfinish, content, that i have found on stack overflow but cant seem to find the solution to my issue any help would be greatly appreciated.
Thanks
CODE:
function about(){
$(document).ready(function() {
$(".flipbox").flippy({
color_target : "rgba(66,66,66,.6)",
direction : "LEFT",
duration : "750",
verso : function(){$(".flipbox").load("hello.html")},
});
});
}
HTML:
<div class="flipbox">
</div>
CSS:
.flipbox{
width: 760px;
height: 460px;
margin:auto;
background-color:#666;
opacity: 0.6;
position:relative;
border: .3px solid black;
-moz-box-shadow: 3px 3px 2px 2px #ccc;
-webkit-box-shadow: 3px 3px 2px 2px #ccc;
box-shadow: 3px 3px 2px 2px #ccc;
}
I'm trying to achieve something like the middle of https://www.popexpert.com, where a hovering over circular images activates a drop shadow effect. How can I achieve this? I tried using CSS, but the drop shadow effect resulted in a square shadow.
You can achieve that effect by using box-shadow and transition properties of CSS3. Here is the working example in the JSFiddle. Note that I've used the border-radius property to make a circle.
Something like this:
JSFiddle Demo
HTML
test
CSS
a {
width:100px;
height:100px;
display:block;
background:yellow;
-webkit-border-radius: 50px;
border-radius: 50px;
}
a:hover {
-webkit-box-shadow: 5px 5px 3px 3px rgba(0, 0, 0, 0.3);
box-shadow: 5px 5px 3px 3px rgba(0, 0, 0, 0.3);
}
I have many divs in an html page. I need to give these divs a drop shadow effect on mouseover using jQuery/Javascript. I can get it work if the drop shadow is to be applied initially but I am not able to get it work at the run time.
The divs which needs to have shadow applied has a common class. In the fiddle it is test.
I have created a fiddle
http://jsfiddle.net/bobbyfrancisjoseph/ZEuVE/2/
It should work on IE8 and above and so I guess CSS3 can be used.
use this css for the shadow effect (covers most browsers):
.classWithShadow{
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
}
use the following jquery:
$(".yourDiv").hover(function()
{
$(this).toggleClass('classWithShadow');
});
Complete code here: http://jsfiddle.net/ZEuVE/3/
EDIT: sorry , I editted your initial fiddle instead of making a new one. But it works ^^ :)
CSS3 shadow is not supported by IE8
For your Above IE8 and other browsers
$("div").hover(function() {
$(this).css(
"box-shadow", "10px 10px 5px #888"
);
}, function() {
$(this).css(
"box-shadow", "0px 0px 0px #888"
);
});
$("div").mouseover(function() {
$(this).css("box-shadow", "5px 5px 5px #555");
}).mouseleave(function(){
$(this).css("box-shadow", "0px 0px 0px #555");
});
OR use mouseenter event
$("div").mouseenter(function() {
$(this).css("box-shadow", "5px 5px 5px #555");
}).mouseleave(function(){
$(this).css("box-shadow", "0px 0px 0px #555");
});
There is little point in using jQuery to add simple hover effects when the CSS :hover psuedo-class works perfectly on its own.
The only problem you have is that IE8 does not support native CSS drop-shdows (box-shadow).
To overcome this you have two choices;
1) Attempt to coax microsoft's proprietary DropShadow and Blur filters into producing something resembling a drop-shadow. It's possible, as this guide shows, but in my experience using MS's filters is your first step on the path to a life filled with misery and pain. Filters affect other, seemingly unrelated styles and elements on the same page in ways that it is impossible to foretell. All you can really do is try it and see.
2) use an image. This is pretty bad, and is tricky to get the image right if the divs are all different sizes. But if you do it in an IE8 only style sheet and know the dimensions beforehand, it can work well.
This Is Universal Answer that works regardless of Codebehind Language
goes in the source aspx. use & CSS
<style>
.img {
border:2px solid #fff;
box-shadow: 1px 1px .5px #ccc;
-moz-box-shadow: 1px 1px .5px #ccc;
-webkit-box-shadow: 1px 1px .5px #ccc;
float:left;
width:auto;
border:solid;
border-width:.25px;
padding:15px;
margin-right:20px;
margin-bottom:20px;
margin-top:20px;
border-radius:5px;
text-align:center;
}
.img:hover {
box-shadow: 10px 10px 5px #ccc;
-moz-box-shadow: 10px 10px 5px #ccc;
-webkit-box-shadow: 10px 10px 5px #ccc;
-webkit-transform: scale(1.25, 1.25);
transform: scale(1.25, 1.25);
background: linear-gradient(to bottom, #FFFFFF, #FFFFFF);
}
</style>
<MyShadowdivOnMousOver class="img">
<MyShadowdivOnMousOver >