How do I make a button with CSS - css

How do I make a button with CSS to look like this?
I've tried, but I can't imagine how should I make bottom line with borders like this.. My result: http://jsfiddle.net/UPpfw/
.button_push{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 189px;
height: 54px;
display: block;
}
.button_green{
background: #4ec9a6;
border-bottom: 7px solid #00a09a;
}
i've solve the problem and the solve was: http://jsfiddle.net/TmQzX/
.button_push{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 189px;
height: 54px;
display: block;
text-align: center;
line-height: 47px;
text-decoration: none;
}
.button_white{
background: #4ec9a6;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 189px;
height: 49px;
display: block;
}
.try_button{
width: 189px;
height: 54px;
position: relative;
top: 212px;
margin: auto;
}

Do you need something like here?
I figured out that you need shadow for your button. and instead of border-bottom: 7px solid #00a09a;
I suggest use of box shadow
-webkit-box-shadow: 0 8px 3px -2px #00a09a;
-moz-box-shadow: 0 8px 3px -2px #00A09A;
box-shadow: 0 8px 3px -2px #00A09A;

Css:
.button_push{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 189px;
height: 54px;
line-height:54px;
display: block;
}
.button_green{
background: #4ec9a6;
border-bottom: 5px solid #00a09a;
text-align:center;
color: white;
text-decoration:none;
font-size:25px;
font-weight:bold;
font-family: Sans-Serif;
}
Fiddle: http://jsfiddle.net/UPpfw/6/

Related

How to add a border to a pseudo-element: before?

Good afternoon, tell me please. I made up a block with a protruding corner on top of the block. On the whole block I have a corner that I made using box-shadow. How can I make exactly such a frame for a pseudo-element (.comment_text:before)
.comment{
margin-top: 20px;
padding: 0px 20px 0px 20px;
}
.comment_text{
max-width: 680px;
background-color: #f1fbff;
padding: 10px;
margin-top: 15px;
color: #FFF;
position: relative;
font-size: 12px;
line-height: 20px;
-webkit-box-shadow: 0px 0px 0px 1.5px #cfcfcf;
-moz-box-shadow: 0px 0px 0px 1.5px #cfcfcf;
box-shadow: 0px 0px 0px 1.5px #cfcfcf;
color: #333333;
font-size: 12pt;
font-family: Arial, sans-serif;
}
.comment_text:before {
content: "";
display: block;
border-bottom: 15px solid #f2fbff;
border-right: 20px solid transparent;
border-left: 0px solid transparent;
position: absolute;
top: -15px;
left: 22px;
}
<div v-for='comment in comments' class="comment">
<div class="comment_text">Some Text</div>
</div>
You can create another psudo element (::after) and make it litter bigger. Add the color similar to your Div border.
.comment{
margin-top: 20px;
padding: 0px 20px 0px 20px;
}
.comment_text{
max-width: 680px;
background-color: #f1fbff;
padding: 10px;
margin-top: 15px;
color: #FFF;
position: relative;
font-size: 12px;
line-height: 20px;
-webkit-box-shadow: 0px 0px 0px 1.5px #cfcfcf;
-moz-box-shadow: 0px 0px 0px 1.5px #cfcfcf;
box-shadow: 0px 0px 0px 1.5px #cfcfcf;
color: #333333;
font-size: 12pt;
font-family: Arial, sans-serif;
}
.comment_text:before {
content: "";
display: block;
border-bottom: 15px solid #cfcfcf;
border-right: 20px solid transparent;
border-left: 0px solid transparent;
position: absolute;
top: -15px;
left: 22px;
}
.comment_text:after {
content: "";
display: block;
border-bottom: 18px solid #f2fbff;
border-right: 20px solid transparent;
border-left: 0px solid transparent;
position: absolute;
top: -12px;
left: 24px;
}
<div v-for='comment in comments' class="comment">
<div class="comment_text">{{ comment.text }}</div>
</div>
Try adding Height and Width to it. and play with it until you have the desired effect.
You can also add a background to define what color you want it in
.comment_text:before {
content: "";
display: block;
border-bottom: 15px solid #f2fbff;
border-right: 20px solid transparent;
border-left: 15px solid transparent;
position: absolute;
top: -15px;
left: 2px;
height: 1px;
width: 10px;
background: blue;
}
.comment{
margin-top: 20px;
padding: 0px 20px 0px 20px;
}
.comment_text{
max-width: 680px;
background-color: #f1fbff;
padding: 10px;
margin-top: 15px;
color: #FFF;
position: relative;
font-size: 12px;
line-height: 20px;
-webkit-box-shadow: 0px 0px 0px 1.5px #cfcfcf;
-moz-box-shadow: 0px 0px 0px 1.5px #cfcfcf;
box-shadow: 0px 0px 0px 1.5px #cfcfcf;
color: #333333;
font-size: 12pt;
font-family: Arial, sans-serif;
}
.comment_text:before {
content: "";
display: block;
border-bottom: 15px solid #f2fbff;
border-right: 20px solid transparent;
border-left: 0px solid transparent;
position: absolute;
top: -15px;
left: 22px;
box-shadow: -2px 0px 0px -0.5px #cfcfcf;
}
.comment_text:after {
content: "";
display: block;
width: 23px;
height: 0px;
top: -8px;
left: 20px;
box-shadow: 0px 0px 0px 1px #cfcfcf;
transform: rotate(35deg);
position: absolute;
}

Rounded corner creates a border between consecutive elements in Internet Explorer

I have 2 consecutive elements. Things look fine on Chrome but theres an issue with IE (what a surprise). There is a thing space between the elements that looks like a border but is in fact the background showing through.
This is happening in IE10 and IE9.
http://codepen.io/anon/pen/KwEVwM
Heading
Bottom
body {
background: blue;
}
.top {
background: white;
border-radius: 10px;
padding: 10px;
border-right: 6px solid #D7D7D7;
border-bottom: 6px solid #B9B9B9;
box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
box-sizing: border-box;
margin-bottom: 20px;
padding-top: 15px;
padding-bottom: 5px;
padding-right: 25px;
float: left;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: none;
position: relative;
z-index: 0;
padding-bottom: 0;
margin-bottom: 0;
}
.bottom {
background: white;
border-radius: 10px;
padding: 10px;
border-right: 6px solid #D7D7D7;
border-bottom: 6px solid #B9B9B9;
box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
box-sizing: border-box;
margin-bottom: 20px;
border-top-left-radius: 0;
position: relative;
z-index: 0;
clear: both;
}
really interesting. in IE11 i get the same issue. Try margin-bottom: -1px on top -> works in IE11.
but i really don't know why this happens. maybe some rounding problems with the shadows, or the z-index: 0

span inside div with .before bugs with IE 10

I use span inside div to simulate whole div as a link. It works well on Chrome & FF, but in IE, it doesn't.
I use an imported font (awesome font) to make appear an icon on the main div (with "before" statement in css). The div appears to be clickable just a little before and just a little after the icon. In FF and Chrom, the whoole icon is clickable... How to make it work in IE?...
css:
.tiremenuadmin{
font-family: 'fontawesome';
display: block;
font-size: 30px;
text-shadow: 0px 0px 7px #000000;
padding: 7px;
float: right;
width: 46px;
text-align: center;
margin: 7px 7px 0 0;
background-color: #364f71;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
cursor: pointer;
opacity: 0.7;
}
.tiremenuadmin:before{
content: "\F013";
}
.menuadmin{
position: relative;
display: block;
width: 100%;
height: 50px;
font-size: 24px;
font-weight: bold;
color: #677889;
text-shadow: 1px 1px 0 #FFFFFF;
}
.enveloppe_menuadmin{
left: 50%;
margin-left: -10px;
margin-top: -70px;
width: 486px;
height: 50px;
position: fixed;
background: #364f71;
z-index: 100;
padding: 10px 12px 10px 10px;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
}
.align_menuadmin{
left: -50%;
}
.cover_admin{
background: #364f71;
float: right;
width: 79px;
height: 8px;
left: 418px;
position: absolute;
}
.env_menuadmin{
width:100%;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background: #f3f3f3;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #d6d6d6;
border-bottom: 1px solid #d6d6d6;
}
.adminmenu, .adminmenu_0, .adminmenu_1, .adminmenu_2, .adminmenu_3, .adminmenu_4, .adminmenu_5, .adminmenu_6, .adminmenu_7{
position: relative;
float: left;
height: 21px;
padding: 14px 15px 15px 15px;
font-family: 'fontawesome';
}
.adminmenu_00{
position: relative;
float: left;
height: 21px;
padding: 14px 15px 15px 15px;
font-family: 'fontello-home';
font-size: 21px;
top: 1px;
}
.adminmenu_0, .adminmenu_1, .adminmenu_2, .adminmenu_3, .adminmenu_5, .adminmenu_6, .adminmenu_7 {
border-left:1px solid #fff;
border-right:1px solid #d6d6d6;
}
.adminmenu_00{
border-right:1px solid #d6d6d6;
}
.adminmenu_4{
border-left:1px solid #fff;
}
.adminmenu_0:before{
content: "\F007";
}
.adminmenu_00:before{
content: "\E0E0";
}
.adminmenu_1:before{
content: "\F085";
}
.adminmenu_2:before{
content: "\F0E0";
}
.adminmenu_3:before{
content: "\F059";
}
.adminmenu_4:before{
content: "\F011";
}
.adminmenu_5:before{
content: "\F0C1";
}
.adminmenu_6:before{
content: "\F15C";
}
.adminmenu_7:before{
content: "\F055";
}
.adminmenu_1 span, .adminmenu_2 span, .adminmenu_3 span, .adminmenu_4 span, .adminmenu_5 span, .adminmenu_6 span, .adminmenu_7 span, .adminmenu_0 span, .adminmenu_00 span {
position: absolute;
width: 100%;
height: 50px;
right: 0px;
top: 0;
z-index: 1000;
}
.adminmenu:hover, .adminmenu_00:hover, .adminmenu_0:hover, .adminmenu_1:hover, .adminmenu_6:hover, .adminmenu_7:hover, .adminmenu_2:hover, .adminmenu_3:hover, .adminmenu_4:hover, .adminmenu_5:hover{
color:#7D92A7;
}
html:
<div class="enveloppe_menuadmin" style="opacity: 1; margin-top: -15px;">
<div class="align_menuadmin">
<div class="env_menuadmin">
<div class="menuadmin">
<div class="adminmenu_00"><span></span></div>
<div class="adminmenu_0"><span></span></div>
<div class="adminmenu_1"><span></span></div>
<div class="adminmenu_5"><span></span></div>
<div class="adminmenu_2"><span></span></div>
<div class="adminmenu_6"><span></span></div>
<div class="adminmenu_7"><span></span></div>
<div class="adminmenu_3"><span></span></div>
<div class="adminmenu_4"><span></span></div>
</div>
</div>
<div class="tiremenuadmin" style="opacity: 1;"></div>
<div class="cover_admin"></div>
</div>
</div>
Demo: http://jsfiddle.net/namkc/
Found:
<div class="adminmenu_00"><span></span></div>

box-shadow - Is this possible?

I need to make a shape like the one below and was trying to get it working with CSS.
The closest I could get was like this. I had to push the shadow on the bottom part down or else it would overlap with the shadow on the top.
Is it possible to actually make the top version with CSS?
Working Example Here
CSS
.block-a {
display: block;
height: 200px;
width: 200px;
background-color: #8BC541;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
-webkit-border-radius: 10px;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius: 10px;
-moz-border-radius-bottomright: 0;
border-radius: 10px;
border-bottom-right-radius: 0;
}
.block-b {
color: #fff;
text-align: center;
line-height: 40px;
position: relative;
display: block;
height: 40px;
width: 80px;
margin-left: 120px;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px#000;
box-shadow: 0 0 10px #000;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
background-color: #8BC541;
}
.block-b:before {
position: absolute;
background-color: #8BC541;
height: 11px;
width: 90px;
top: -11px;
left: -10px;
display: block;
content: "";
}
.block-b:after {
padding-left: 5px;
color: #fff;
content: "▲";
}
HTML
<div class="block-a"></div>
<div class="block-b">Login</div>
Image
It's an answer pile-on! Looks like you have lots of options to work with. I'll add another to the pile: http://jsfiddle.net/XrkJq/

Parent div to follow height of child - for child without float

The only answer I can find to my problem is clear the float - but I have non. So hope you can help with another answer :-)
Here is my code, and I am trying to make the parent div of a button follow the expansion done by the padding.
<div class="button">
add
</div>
And css
.button {
background-color: #ccc; }
.button a {
background-color: #96BD1E;
color: black;
font-size: large;
padding: 6px 12px;
width: 120px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-opera-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
height: 59px;
margin: 10px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
clear: both;
}
And here is an example of it to play with http://jsfiddle.net/zNLVZ/1/
Change your css to this:
.button {
background-color: #ccc;
}
.button a {
display:inline-block;
background-color: #96BD1E;
color: black;
font-size: large;
padding: 6px 12px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-opera-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
margin: 10px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
clear: both;
}

Resources