In mozilla my button not look good as it shown in chrome - html

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

Related

Why some buttons look different in React?

I am trying to create a crud application in React.
As you can see from the picture, some buttons look different somehow I don't know why.
Could you please help me with finding the error, I can't find it and have spent hours on it.
As you can see from the picture, "Güncelle" and "Sil" buttons don't look the way they should be.
Picture:
ScreenShot
Here is my .js and .css file:
import React from "react";
import { useNavigate } from "react-router-dom";
import "./İlCrud.css";
export default function İlCrud() {
let navigate = useNavigate();
return (
<div id="il-crud-div">
<h3>İl CRUD</h3>
<div id="create-div">
<input type="text" name="ilKodu" placeholder="İl Kodu..."/>
<br/>
<input type="text" name="ilAdi" placeholder="İl Adi..."/>
<br/>
<input type="button" id="create" value="Yarat"/>
</div>
<div id="update-delete-div">
<input type="button" id="update" value="Güncelle"/>
<input type="button" id="delete" value="Sil"/>
</div>
</div>
);
}
Here, I have created one container div and created 2 divs inside of it. I have created some buttons and input areas.
#import url(https://fonts.googleapis.com/css?family=Prosto+One);
*
{
-webkit-transition: all 0.3s ease;
}
body
{
overflow: hidden;
margin: 0px;
padding: 0px;
font-family: 'Prosto One', cursive;
background: url('https://subtlepatterns.com/patterns/egg_shell.png');
_background: #eee;
}
#il-crud-div
{
color: #777;
border: 0px solid hsl(0, 0%, 69%);
width: 75%;
margin-left: 10%;
margin-top: 120px;
text-align: center;
padding: 40px;
padding-bottom: 300px;
padding-top: 40px;
border-radius: 3px;
box-shadow: 0px 0px 8px #777;
background: rgba(255, 255, 255, 0.6);
}
#create-div
{
color: #777;
border: 0px solid hsl(0, 0%, 69%);
width: 45%;
padding-top: 20px;
margin-right: 10%;
text-align: center;
box-shadow: 0px 0px 8px #777;
background: rgba(255, 255, 255, 0.6);
float: left;
}
#update-delete-div
{
color: #777;
border: 0px solid hsl(0, 0%, 69%);
width: 45%;
padding-top: 20px;
box-shadow: 0px 0px 8px #777;
background: rgba(255, 255, 255, 0.6);
float: left;
}
#create-div input
{
color: #777;
font-weight: bold;
width: 40%;
padding: 10px;
margin: 10px;
border: 1px solid #afafaf;
border-radius: 3px;
background: rgba(255, 255, 255, 0.5);
outline: none;
}
#create-div #create
{
color: white;
width: 15%;
border: 0px solid transparent;
outline: none;
cursor: pointer;
background: #0aee62;
}
#update-delete-div #update
{
color: white;
width: 15%;
border: 0px solid transparent;
outline: none;
cursor: pointer;
background: #1501c2;
}
#update-delete-div #delete
{
color: white;
width: 15%;
border: 0px solid transparent;
outline: none;
cursor: pointer;
background: #d60a0a;
}
If you look at your css code, you have "#create-div input". Even though you have an id selector on the input 'Button' it's taking on the css code because it's in the id="create-div" and it is an input. You didn't do the same for the update and delete inputs so it's missing the padding and such. Here the sandbox so you can see what I mean https://codesandbox.io/s/nostalgic-kare-jyf76?file=/src/styles.css:1040-1057

Styling a button with hover effect

I'm having some issues with my code.
I added this button to my HTML page and CSS with the styling of the button class and the hover effect:
.buton4e {
background-color: #383f95;
border: none;
border-radius: 8px;
color: white;
padding: 7px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: bold;
cursor: pointer;
font-size: 16px;
}
.buton4e:hover {
background-color: #383f95;
border: none;
border-radius: 8px;
color: white;
padding: 7px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: bold;
font-size: 16px;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 40px 0 rgba(0, 0, 0, 0.19);
}
.intro-header {
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
color: #f8f8f8;
background: url(../img/background.jpg) no-repeat center center;
background-size: cover;
}
.intro-message {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}
.intro-message>h1 {
margin: 0;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
font-size: 5em;
}
.intro-divider {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.intro-message>h3 {
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}
<!-- Header -->
<header class="intro-header">
<div class="container">
<div class="intro-message">
<br /><br /><br />
<h3>90% of IT companies believe they need to partner to grow.<br /> Join <b>Channeliser</b> - the global network for building IT partnerships.</h3>
<hr class="intro-divider">
<button class="buton4e">JOIN FOR FREE</button>
</div>
</div>
</header>
The problem is that the effect works when I hover the button but there when the button is static it has no styling
*EDIT:
Sorry for not posting all the code.
This should be sufficient for the things I'm trying to modify.
Thanks in advance.
.styledButton {
font-family: Arial;
width: 100px;
height: 50px;
color: black;
background-color: grey;
border: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.styledButton:hover {
color: white;
background-color: black;
}
.styledButton:active {
opacity: 0.5;
}
<button class = "styledButton">Click Me!</button>
This should help. Any click animations I have trouble with.

CSS Button and Image Behind

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%;
}

How to fix div hover to display correctly without missing sides?

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;
}

CSS Problems- header buttons and width

I have problems with the header buttons (on hover) and the body width that I want to make 100%.
Please help.
thank you.
here is the css, you can see the html in jsfiddle.
body {
background-color:rgba(0, 0, 0, 0.1);
font-family: "Alef Hebrew",
“Helvetica Neue”,
Helvetica,
Arial,
sans-serif;
}
#header {
left: 0;
top: 0px;
width: 100%;
height: 64px;
background: #007ac1;
position: fixed;
}
#header ul {
margin-left: 200px !important;
}
#x {
border-left: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0px -1px 0px 1px rgba(255, 255, 255, 0.11);
text-decoration: underline;
}
.btn {
margin-left: -2px;
border-right: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.11);
color: white;
display: inline;
text-decoration: none;
padding: 25px;
transition: 0.5s;
font-weight:bold;
}
.btn:hover {
background: rgba(255,255,255,1);
color: #000;
}
#body {
padding: 100px;
width: 100%;
background: #fff;
float:left;
}
http://jsfiddle.net/EuR8s/
DEMO
CSS:
#header ul {
margin-left: 100px !important;
}
changed the margin-left: to 100px