I've got the CSS code for my register button:
.register-button {
padding:7px 375px;
background: #3b7aae;
border-radius: 5px;
border: none;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), inset 0 1px 0 1px rgba(255,255,255,.25);
color: #fff;
font-weight: bold;
cursor: pointer;
cursor: hand;
font-size: 20px;
text-decoration: none;
position:absolute;
bottom:-100px;
left:0px;
text-align:left;
text-shadow:2px 2px rgba(0,0,0,.3);
}
.register-button:hover {
background-color: #4386be;
}
.register-button span {
display:block;
font-weight:normal;
}
And the HTML looks like:
<a class="register-button" href="/register">
Register today, you won't regret it!
</a>
It then outputs this:
My question is simple, how can I get it to stay on one single line, rather than like how it is in the picture? I've tried changing the position to fixed and adjusting top; & left; and it just made things worse.
Set the width of the .register-button to 300px.
Here is a jsFiddle example using your code (http://jsfiddle.net/2WCje/)
CSS:
.register-button {
padding:7px 375px;
background: #3b7aae;
border-radius: 5px;
border: none;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), inset 0 1px 0 1px rgba(255, 255, 255, .25);
color: #fff;
font-weight: bold;
cursor: pointer;
cursor: hand;
font-size: 20px;
text-decoration: none;
position:absolute;
bottom:-100px;
left:0px;
text-align:left;
text-shadow:2px 2px rgba(0, 0, 0, .3);
width: 300px;/*----------This will line up the text for you-----------*/
}
.register-button:hover {
background-color: #4386be;
}
.register-button span {
display:block;
font-weight:normal;
}
Reduce your padding value from
.register-button {
padding:7px 375px;
to something like this
.register-button {
padding:7px 35px;
Related
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%;
}
I am not able to achieve the click-effect in my Next button (see snippet 1).
In the first snippet it is achievend with the float: left; value, but when I insert it into my code, it breaks the position of the button. My 'Next' button is supposed to be the way it is the second snippet, i.e. vertically and horizontally centered.
Any ideas how to find a workaround here?
Snippet 1
.next-button {
transition: all 0.1s;
-webkit-transition: all 0.1s;
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
float: left;
border-radius: 10px;
font-family: 'Montserrat';
font-size: 25px;
color: #ffffff;
text-decoration: none;
background-color: #f9c60f;
border-bottom: 5px solid #888888;
text-shadow: 1px -2px #888888;
}
.next-button:active {
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}
<html lang="en">
<head>
<body>
NEXT
</body>
</html>
Snippet 2 (My code)
.next-button {
transition: all 0.1s;
-webkit-transition: all 0.1s;
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
float: left;
border-radius: 10px;
font-family: 'Montserrat';
font-size: 25px;
color: #ffffff;
text-decoration: none;
background-color: #f9c60f;
border-bottom: 5px solid #888888;
text-shadow: 1px -2px #888888;
}.course-video {
background: #f9c70f;
border: none;
margin: 0;
box-shadow: 0px 2px 4px rgba(0,0,0,0.3) inset;
-moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.3) inset;
border-radius: 0;
-moz-border-radius: 0;
}
.next-video-button {
transition: all 0.1s;
-webkit-transition: all 0.1s;
padding:7px 200px;
border-radius: 10px;
font-family: 'Montserrat';
font-size: 1em;
color: #ffffff;
text-decoration: none;
background-color: #888888;
border-bottom: 5px solid #5a5a5a;
text-shadow: 1px -2px #888888;
text-align: center;
line-height:49px;
}
.next-video-button:active {
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}
.video-title {
font-family: montserrat;
font-size: 1.5em;
color: #000000;
padding: 0.5em;
box-sizing: border-box;
width: 854px;
text-shadow: 0px 2px 4px rgba(0,0,0,0.3);
}
.video-descr {
width: 854px;
box-sizing: border-box;
height: 50px;
margin-top: -5px;
text-align:center;
}
.next-button:active {
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}
<div class="course-video video-title">Hello</div>
<iframe src="https://player.vimeo.com/video/154094373" width="854" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div class="course-video video-descr">NEXT</div>
Try using
.next-video-button {
display:inline-block;
...
}
instead of
float:left
Using inline-block makes the element act like it was text so your text-aligns will work on these as well
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;
}
Only on IE the tooltip shows underneath the text of the link therefore the text in the tooltip can't be read. I know I could move the tooltip over to the right but that doesn't look good.
How can I make the tooltip background solid or on top of the links. I already tried z-index.
<ul style=" list-style: circle; margin: 0px 2px 0px 12px;">
<li style="z-index:10">
<a class="tooltip" href="abc.com"> <span class="classic" ><%= content %></span></a>
</li>
</ul>
.classic
{
padding: 0.8em 1em;
display:none;
text-decoration: none;
list-style: circle;
background:#FFC62E;
}
.tooltip {
border-bottom: 1px dotted #000000;
color: #000000;
outline: none;
text-decoration: none;
position: relative;
}
.tooltip span
{
display:inline;
margin-left: -999em;
position: absolute;
text-decoration: none;
color:#000000;
}
.tooltip:hover span {
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute;
left: 1em;
top: 2em;
z-index: 1;
margin-left: 170;
width: 250px;
display:inline-block;
background-color: #FFC62E;
background:rgb(255,198,46);
position:absolute;
text-decoration: none;
color:#000000;
border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
}
How about this:
http://fiddle.jshell.net/br6AP/
Could anyone show me some tutorials that make a button in css and doesn't require images? I googled it but everything involved images...
Thanks!
Um, define "button"? If you just want a basic button, you don't even need CSS, just use an HTML input or button tag...
<input type="button" value="Press me!" />
or
<button>Press me!</button>
If I understand you correctly, you want to make an arbitrary element look like a button?
Well ... just write CSS accordingly! Here's a kickoff example which makes a link look like a button:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 3489881</title>
<style>
a.button {
display: inline-block;
padding: 0 2px;
background: lightgray;
border: 2px outset lightgray;
cursor: default;
}
a.button:active {
border-style: inset;
}
</style>
</head>
<body>
<p><a class="button">link</a>
</body>
</html>
This one is kind of dull but gets the trick done!
h1 {
font-family: Arial;
}
a {
display: inline-block;
padding: 2 5px;
background: lightgray;
border: 5px outset lightgray;
cursor: default;
text-decoration:none;
color: black;
}
a:hover {
background: gray;
}
CSS:
.button{
background-color: #000;
color: #FF6600;
font: bolder 1.0em Tahoma;
border: 1px solid Yellow;
padding: 2px;
}
.button:hover{
border: 1px solid Red;
}
HTML:
<input type="button" class="button" value="Button"/>
<input type="button" class="button" value="Another"/>
Try it: http://jsfiddle.net/eD9sf/
There are some awesome examples here - Pure CSS Buttons - of buttons that don't need any images but are legit. I think that you could add some gradients to some of them, but otherwise they looks exactly like the ones on Facebook, Twitter, Wordpress, etc. If you don't know much CSS, I'd suggest that you just copy one of those examples.
This is a very simple design, but looks pretty good
body {
font-family: Helvetica, sans-serif;
font-size: .8rem;
}
.button {
text-align: center;
background-color: #888;
border-top: 0px solid #fff; /*define the color of the upper border */
border-bottom: 3px solid #666;
border-radius: 2px;
}
.button:hover {
box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1); /* light overlay */
}
.button:active {
border-top-width: 2px; /* add this so it gets 'pushed down' */
border-bottom-width: 1px;
}
.button a {
color: #fff;
display: block;
text-decoration: none;
padding: .2rem;
}
/* Second button */
.button-link {
text-align: center;
color: #fff;
display: block;
text-decoration: none;
padding: .2rem;
background-color: #888;
border-top: 0px solid #fff; /*define the color of the upper border */
border-bottom: 3px solid #666;
border-radius: 2px;
}
.button-link:hover {
box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1); /* light overlay */
}
.button-link:active {
border-top-width: 2px; /* add this so it gets 'pushed down' */
border-bottom-width: 1px;
}
<div class="button">Click me</div><br/>
<a class="button-link" href="#">Click me, link only</a>
This one looks lovely, acording to me :)
.button {
color: rgba(255, 255, 255, 1);
background-color: rgba(61, 51, 119, 1);
font-weight: 500;
padding: 9px;
box-shadow: 0px 5px 0px rgba(31, 36, 78, 1), 0px 9px 12px rgba(0, 0, 0, .7);
width: 160px;
text-align: center;
transition: all .3s ease;
font-size: 15px;
border: none;
border-radius: 5px;
outline: none;
margin: auto;
font-family: "Century Gothic";
transform: scale(0.9);
}
.button:active {
box-shadow: 0px 2px 0px rgba(31, 36, 78, 1), 0px 2px 4px rgba(0, 0, 0, .9);
top: 6px;
transform: scale(0.9) translateY(3px);
}
<input class = 'button' type = 'button' value = 'Click' />