I have the following Jade / HTML:
a.service.comparison(ng-href="...")
.icon
i.far.fa-map-signs
.content
span.d-block.title Compare energy deals
span.text Looking for a better energy deal?
.arrow
button.btn(type="button")
i.fas.fa-chevron-circle-right
And Less / CSS:
.service {
color: #grey-dark;
display: flex;
margin: 0 auto 15px;
max-width: 100%;
.icon {
border: 1px solid #ccc;
border-right: none;
border-radius: 2px 0 0 2px;
font-size: 28px;
padding: 10px 15px;
i {
position: relative;
top: 50%;
text-align: center;
.transform(translateY(-70%));
width: 40px;
}
}
.content {
border: 1px solid #ccc;
border-right: none;
flex-grow: 1;
padding: 15px;
.title {
color: #green-medium;
font-size: 17px;
}
}
.arrow {
min-height: 100%;
.btn {
background: #green-medium;
border-radius: 0 3px 3px 0;
color: white;
padding: 0;
width: 35px;
height: 100%;
i {
position: relative;
top: 50%;
.transform(translateY(20%));
vertical-align: top;
}
}
}
}
It looks nice on all Browsers, the left icon is in centre and the right green button has a 100% height and fill the box... Unfortunately on iOS Safari it looks differently: the left icon is on top and the right button doesn't fill the entire box height as you can see in the image below.
Does anyone know how can I fix this? Thanks!
EDIT:
Transform Mixin:
.transform(#string){
-webkit-transform: #string;
-moz-transform: #string;
-ms-transform: #string;
-o-transform: #string;
transform: #string;
}
Related
This question already has answers here:
Circle with two borders
(4 answers)
Closed 3 months ago.
I have a CSS style for a button. I don’t know how to do it. I think it’s a bit too complicated and it’s not easy to make responsive adjustments. I would like to ask everyone how to write a button like this in CSS? thanks
.save_coin {
display: inline-block;
position: relative;
z-index: 3;
}
.save_coin::after {
content: "";
display: inline-block;
position: absolute;
background: #222;
border-radius: 32px;
padding: 26px 101px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#media (max-width: 768px) {
.save_coin::after {
border-radius: 38px;
padding: 38px 102px;
}
}
.save_coin span {
display: inline-block;
font-weight: 500;
text-align: center;
background: #222;
color: #fff;
padding: 12px;
border-radius: 32px;
position: relative;
z-index: 2;
border: 1px solid #fff;
width: 192px;
}
#media (max-width: 768px) {
.save_coin span {
width: auto;
font-size: 24px;
font-weight: 700;
padding: 15px 46px;
}
}
.save_coin:hover span {
color: #222;
background-color: #fff;
}
<span>ｓａｖｅ</span>
I think you can use outline attribute, work pretty good imo.
button {
padding: 10px 30px;
border-radius: 50px;
border: 2px solid white;
background-color: black;
color: white;
outline: 2px solid black;
}
button:hover {
background-color: white;
color: black;
}
<button>save</button>
You could try the box-shadow CSS property:
button {
cursor: pointer;
outline: none;
font-size: 30px;
/* 👇 outer line */
border: 5px solid black;
/* some very large number, to get a pill effect */
border-radius: 1024px;
padding: 30px 60px 30px 60px;
background: black;
color: white;
/* 👇 inner white line */
box-shadow: inset 0 0 0 3px white;
/* custom transition */
transition: 0.3s ease;
}
/* ignore this if you just want button design */
button:hover {
background: white;
color: black;
}
<button type="button">立即儲值</button>
I'm new to HTML/CSS and attempting to replicate this button effect in a project of mine where the buttons are children of a div. However, whenever I do the translateY, my buttons move to the side instead. Here is the HTML and CSS; button-2 is the problematic one:
.container {
position: relative width: 600px;
height: 600px;
}
#button-1 {
position: absolute;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #4CAF50;
border: ridge;
border-radius: 15px;
box-shadow: 0 9px #999;
top: 50%;
left: 25%;
}
#button-1:hover {
background-color: #3e8e41
}
#button-1:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(10px);
}
#button-2 {
position: absolute;
width: 100px;
padding: 5px 5px;
border-style: solid;
border-width: 2px;
border-radius: 10px;
border-color: darkslategray;
background-color: antiquewhite;
box-shadow: 0px 9px gray;
cursor: pointer;
top: 62%;
left: 50%;
/* if i remove this line, translation works as expected
but then the button is no longer centered horizontally
consequently, keeping the line breaks the affect
but the button can be centered horizontally
*/
transform: translate(-50%, 0);
}
#button-2:hover {
background-color: cornsilk;
}
#button-2:active {
background-color: cornsilk;
box-shadow: 0px 3px gray;
transform: translateY(5px);
}
<h2>Animated Button - "Pressed Effect"</h2>
<div class=container>
<button id="button-1">Btn1</button>
<button id="button-2">Btn2</button>
</div>
The problem seems to stem from transform: translate(-50%, 0);, which is what I have to do to center button-2 horizontally in the container div. I can remove that line and the effect works, but then button-2 is no longer centered horizontally. Why is it that transform: translate(-50%, 0); seemingly causes the subsequent transform: translateY(5px); not to work for button-2? Is there anyway I can horizontally (but not vertically) center button-2 while also being able to achieve the desired effect?
The problem is that when you set the translate property on the second button becoming active, you overwrite the original transform which is moving the button by half its width in the negative X direction.
It is important to keep this translation as well as the new one so make the translation in the active state set both the X and Y values that you want.
.container {
position: relative width: 600px;
height: 600px;
}
#button-1 {
position: absolute;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #4CAF50;
border: ridge;
border-radius: 15px;
box-shadow: 0 9px #999;
top: 50%;
left: 25%;
}
#button-1:hover {
background-color: #3e8e41
}
#button-1:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(10px);
}
#button-2 {
position: absolute;
width: 100px;
padding: 5px 5px;
border-style: solid;
border-width: 2px;
border-radius: 10px;
border-color: darkslategray;
background-color: antiquewhite;
box-shadow: 0px 9px gray;
cursor: pointer;
top: 62%;
left: 50%;
/* if i remove this line, translation works as expected
but then the button is no longer centered horizontally
consequently, keeping the line breaks the affect
but the button can be centered horizontally
*/
transform: translate(-50%, 0);
}
#button-2:hover {
background-color: cornsilk;
}
#button-2:active {
background-color: cornsilk;
box-shadow: 0px 3px gray;
transform: translate(-50px, 5px);
}
<h2>Animated Button - "Pressed Effect"</h2>
<div class=container>
<button id="button-1">Btn1</button>
<button id="button-2">Btn2</button>
</div>
Note: as others have suggested you may like to look into using flex (or grid) to position your buttons rather than having to mess around with positioning using absolute and translations. The translate for Y could then remain as in the original and you wouldn't be translating in the X direction at all.
you have gotten your X and Y axis mixed up.
you translated via translate(-50%, 0) which moves it by an X of -50% and a Y of nothing, you can fix this by changing it to translate(0, -50%) which will move it down a Y of -50%, and an X of 0.
test the snippet:
.container {
position: relative width: 600px;
height: 600px;
}
#button-1 {
position: absolute;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #4CAF50;
border: ridge;
border-radius: 15px;
box-shadow: 0 9px #999;
top: 50%;
left: 25%;
}
#button-1:hover {
background-color: #3e8e41
}
#button-1:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(10px);
}
#button-2 {
position: absolute;
width: 100px;
padding: 5px 5px;
border-style: solid;
border-width: 2px;
border-radius: 10px;
border-color: darkslategray;
background-color: antiquewhite;
box-shadow: 0px 9px gray;
cursor: pointer;
top: 62%;
left: 50%;
/* if i remove this line, translation works as expected
but then the button is no longer centered horizontally
consequently, keeping the line breaks the affect
but the button can be centered horizontally
*/
transform: translate(0, -50%);
}
#button-2:hover {
background-color: cornsilk;
}
#button-2:active {
background-color: cornsilk;
box-shadow: 0px 3px gray;
transform: translateY(5px);
}
<h2>Animated Button - "Pressed Effect"</h2>
<div class=container>
<button id="button-1">Btn1</button>
<button id="button-2">Btn2</button>
</div>
I'm trying to get this result :
And here is what I have for now (I'm only trying to get the result on the left element for the moment) :
I am trying to have this left arrow transparent but I can't find how to do that.
CSS Code :
.main_container .photo_container .mask a {
color: #FFFFFF;
font-size: 25px;
position: relative;
}
.main_container .photo_container .mask a:first-child {
border: 1px solid #FFFFFF;
padding: 5px 11px 7px;
}
.main_container .photo_container .mask a:first-child::before {
border-bottom: 7px solid transparent;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
content: "";
display: inline-block;
left: -8px;
position: absolute;
top: 20px;
}
.main_container .photo_container .mask a:first-child::after {
border-bottom: 24px solid transparent;
border-right: 25px solid #eee;
border-top: 24px solid transparent;
content: "";
display: inline-block;
left: -26px;
position: absolute;
top: -1px;
}
HTML Code :
<div class="photo_container">
<img src="images/placeholder/car1.png" class="img-responsive" alt="" />
<div class="mask">
<i class="fa fa-search"></i>
<i class="fa fa-link"></i>
</div>
</div>
Can you help me?
If you don't mind using transform this is pretty simple:
Making a pseudo element after the existing one, centering it on the correct side, and rotating it by 45 degrees.
The 70.71% figure is gotten using s = q / sqrt(2) where s is the side of a square, and q is the diagonal.
.arrow
{
border: 1px white;
border-style: solid solid solid none;
position: relative;
width: 50px;
height: 50px;
}
.arrow::after
{
content: "";
display: block;
top: 50%;
left: 0;
position: absolute;
border: 1px white;
border-style: none none solid solid;
width: 70.71%; /* the side of a square is 70.71% the length of it's diagonal */
height: 70.71%;
transform: translate(-50%, -50%) rotate(45deg);
}
Finally, we can change what borders are shown, and the absolute positioning to make the arrow appear on the desired side:
body
{
background-color: black;
padding: 50px;
}
.arrow_left,
.arrow_right
{
display: inline-block; /* just to get them next to eachother */
border: 1px white;
position: relative;
width: 50px;
height: 50px;
}
.arrow_left { border-style: solid solid solid none; }
.arrow_right { border-style: solid none solid solid; }
.arrow_left::after,
.arrow_right::after
{
content: "";
display: block;
top: 50%;
position: absolute;
border: 1px white;
width: 70.71%; /* the side of a square is 70.71% the length of it's diagonal */
height: 70.71%;
transform: translate(-50%, -50%) rotate(45deg);
}
.arrow_left::after
{
left: 0;
border-style: none none solid solid;
}
.arrow_right::after
{
left: 100%;
border-style: solid solid none none;
}
<div class="arrow_left"></div>
<div class="arrow_right"></div>
The left 'arrow' cannot be transparent, because in reality it is just a solid border applied to 1/4 of a box.
(See this article explaining how the css triangle effect is achieved.)
You will either need to use images, or tweak the graphic design.
You tried use border to achieve transparent triangle. It doesn't work. So let's think about other way to implement what we want.
I created simple demo - any triangle is made by 2 lines (simple trigonometry knowledge needed.)
http://codepen.io/anon/pen/PPbxEQ - i used some variables in css, so in that case i used stylus - more prefer read the source code, not just compiled result.
We create a pseudo element for first icon. Rotate it and evaluate new height. Than change transform-origin. Easy.
We change the angle - and recalculate the cos(angle);
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-image: url("http://7-themes.com/data_images/out/2/6775415-beautiful-images.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 0 0;
overflow: hidden;
}
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.Icons {
width: 50vmin;
height: 25vmin;
display: flex;
}
.Icon {
flex: 1;
border-color: currentColor;
border-style: solid;
display: flex;
align-items: center;
justify-content: center;
font-size: calc(2vw + 2vh + 4vmin);
color: #fff;
position: relative;
}
.Icon + .Icon {
margin-left: -1px;
}
.Icon:first-of-type {
border-width: 1px 1px 1px 0;
}
.Icon:last-of-type {
border-width: 1px 0 1px 1px;
}
.Icon:first-of-type:before,
.Icon:first-of-type:after,
.Icon:last-of-type:before,
.Icon:last-of-type:after {
content: '';
position: absolute;
margin: auto;
color: inherit;
background-color: currentColor;
width: 1px;
height: calc(50% / 0.866025404); /* Our angle is 30deg, so formula is calc(50% / cos(angle)) */
}
.Icon:first-of-type:before,
.Icon:first-of-type:after {
left: 0;
}
.Icon:first-of-type:before {
top: 0;
transform: rotateZ(30deg);
transform-origin: top;
}
.Icon:first-of-type:after {
bottom: 0;
transform: rotateZ(-30deg);
transform-origin: bottom;
}
.Icon:last-of-type:before,
.Icon:last-of-type:after {
right: 0;
}
.Icon:last-of-type:before {
top: 0;
transform: rotateZ(-30deg);
transform-origin: top;
}
.Icon:last-of-type:after {
bottom: 0;
transform: rotateZ(30deg);
transform-origin: bottom;
}
<div class="Icons">
<div class="Icon">I</div>
<div class="Icon">O</div>
</div>
I m trying to make vertical float button for my website but this is what I m getting. Text is outside box
CSS
#feedback {
height: 104px;
width: 104px;
position: fixed;
top: 40%;
z-index: 999;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#feedback a {
display: block;
background: #f00;
height: 15px;
width: 70px;
padding: 8px 16px;
color: #fff;
font-family: Arial, sans-serif;
font-size: 17px;
font-weight: bold;
text-decoration: none;
border-bottom: solid 1px #333;
border-left: solid 1px #333;
border-right: solid 1px #fff;
}
#feedback a:hover {
background: #06c;
}
HTML
<div id="feedback">
Test
</div>
The height: 15px is what that causes this issue for you. Everything is fine otherwise. Remove the height from #feedback a and it will be alright.
#feedback a {
display: block;
background: #f00;
height: 15px; /* Remove this... */
Height of an element is generally set by the content and the line-height. If you try to manually set, it goes out of context with the contents. That's what just happened now.
how will i place these to divs side by side i have looked online and in other forums but they seemed a bit to confusing because my code is creating a "paper" effect and theirs is not so im really stuck at this moment.. does any body know how to do this? i have a jsfiddle HERE
this site it making me post code to include a js fiddle so here is the code
/** Playstation **/
.info, .info:before, .info:after
{
background-color: blue;
border: 1px solid #ccc;
box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2);
}
.infops
{
position: relative;
width: 50%;
padding: 2em;
margin: 50px auto;
}
.infops:before, .infops:after
{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: rotateZ(2.5deg);
-o-transform: rotate(2.5deg);
transform: rotateZ(2.5deg);
z-index: -1;
}
.infops:after
{
-webkit-transform: rotateZ(-2.5deg);
-o-transform: rotate(-2.5deg);
transform: rotateZ(-2.5deg);
}
.infops h1
{
font-size: 1.8em;
font-weight: normal;
text-align: center;
padding: 0.2em 0;
margin: 0;
border-top: 1px solid #ddd;
border-bottom: 2px solid #ddd;
}
.infops p
{
text-align: left;
margin: 1.5em 0;
}
/**xbox**/
.infoxbox, .infoxbox:before, .infoxbox:after
{
background-color: orange;
border: 1px solid #ccc;
box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2);
}
.infoxbox
{
position: relative;
width: 50%;
padding: 2em;
margin: 50px auto;
}
.infoxbox:before, .infoxbox:after
{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: rotateZ(2.5deg);
-o-transform: rotate(2.5deg);
transform: rotateZ(2.5deg);
z-index: -1;
}
.infoxbox:after
{
-webkit-transform: rotateZ(-2.5deg);
-o-transform: rotate(-2.5deg);
transform: rotateZ(-2.5deg);
}
.infoxbox h1
{
font-size: 1.8em;
font-weight: normal;
text-align: center;
padding: 0.2em 0;
margin: 0;
border-top: 1px solid #ddd;
border-bottom: 2px solid #ddd;
}
.infoxbox p
{
text-align: left;
margin: 1.5em 0;
}
And here is my html
<div class="infoxbox">
<h1>Xbox</h1>
</div>
<div class="info">
<h1>Playstation</h1>
</div>
What about float: left to infops div?
You can use display:inline-block to both the divs
.infoxbox{
display:inline-block
}
.info{
display:inline-block;
}
Fiddle
You can use display:inline-block. I have used inline style attribute for demo
DEMO
You just have to use float: left for one side and float:right for the other one.
Another alternative is to use tables:
<table width="100%">
<td>
<div class="infoxbox">
<h1>Xbox</h1>
</div>
</td>
<td>
<div class="infops">
<h1>Playstation</h1>
</div>
</td>
</table>
http://jsfiddle.net/c6gus/15/
is this what you want?
.infops {float:left;}
http://jsfiddle.net/c6gus/3/
.infoxbox{display: inline-block;}
.infops{display: inline-block;}