i'm working on this element http://zag-test.nowcommu.myhostpoint.ch/
what i need is to "enalrge" the entire element in the same position, but via CSS i can on enlarge the central button (CLICK button).
How can i solve?
CSS
.cn-button {
position: absolute;
top: 100%;
left: 50%;
z-index: 11;
margin-top: -2.25em;
margin-left: -3.78em;
padding-top: 0em;
width: 7.5em;
height: 7.5em;
border: none;
border-radius: 50%;
background: none;
background-color: #000;
color: #f9d70a;
text-align: center;
font-weight: 700;
font-size: 1.3em;
text-transform: uppercase;
cursor: pointer;
-webkit-backface-visibility: hidden;
You can use the transform attribute with scale to make everything bigger:
#cn-wrapper {
transform: scale(1.4) !important;
}
This is for the outer menu options, and the !important forces it to be used
Related
I want to make a small button hover animation. the animation is like that:
a blue div which have the same width an height as the button comes from the bottom left of the button to cover it. The problem is that they have not the same height and width.
Here's the HTML and the css :
[![button{
box-sizing: border-box;
background-color: transparent;
border: none;
display: inline-block;
}
.button-wrapper {
position: relative;
overflow: hidden;
padding: 15px 30px;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
font-size: 14px;
line-height: 20px;
border: solid 2px #2A5A8B;
border-radius: 6px;
text-decoration: none;
color: #2A5A8B;
cursor : pointer;
transition: all .5s;
z-index: 1;
}
.button-wrapper::after{
width: 100%;
height: 100%;
margin: auto;
position: absolute;
bottom: -100%;
right: -100%;
background-color: #2A5A8B;
transition: all .25s;
z-index: -1;
content: '';
}
.button-wrapper:hover{
color: white;
}
.button-wrapper:hover::after{
transform: translateX(-100%) translateY(-100%);
}
<button>
<div className='button-wrapper'>
{Login}
</div>
</button>
PS: it's working properly on firefox.
Greetings! This is my second time posting today, but that's how people learn, right?
Anyway! I am creating an app with Electron and I want to create a custom title bar. I have been successful but there is a small detail that kind of bothers me. I want the buttons to change their opacity when the mouse hovers them but when the cursor leaves the app after hovering the buttons, they don't change. Instead, I have to go to the app again, hover the button again and finally see the right behaviour.
Is there a way to fix this? It's not that fatal, but I am trying to make my app look good and pleasant to the eye as much as I can!
HTML:
<div class="titlebar">
<div class="dragzone"></div>
<h1>Dashboard - Wealm</h1>
<button id="closeApp">x</button>
<button id="minApp">-</button>
</div>
CSS:
.titlebar {
position: absolute;
top: 0;
width: 100%;
height: 29px;
overflow: hidden;
z-index: 50;
background: rgba(255, 255, 255, 0.8);
}
.titlebar .dragzone {
-webkit-app-region: drag;
overflow: hidden;
position: absolute;
left: 0;
width: 990px;
height: 29px;
}
.titlebar h1 {
float: left;
opacity: 0.85;
margin: 4px 0 0 43.5%;
font-family: Jost-400-Book;
font-size: 12pt;
}
.titlebar #closeApp {
font-weight: bold;
opacity: 0.55;
float: right;
background: none;
border: none;
outline: none;
font-family: Eight One;
font-size: 18pt;
margin-top: 2px;
}
.titlebar #minApp {
font-weight: bold;
opacity: 0.55;
float: right;
background: none;
border: none;
outline: none;
font-family: Eight One;
font-size: 18pt;
margin-top: 2px;
}
.titlebar #closeApp:hover {
opacity: 1;
}
.titlebar #minApp:hover {
opacity: 1;
}
Great news! I did found a solution! What I did - First of all, I replaced the content inside the buttons with paragraphs. It's the same text but in paragraph tags. I set the overflow property of the buttons to visible, in order to be able to set the height of the buttons to 0 without hiding the paragraphs themselves. Then I just played around with margins. It's up to you!
.titlebar #closeApp {
font-weight: bold;
background: none;
float: right;
opacity: 0.55;
border: none;
outline: none;
font-family: Eight One;
font-size: 18pt;
overflow: hidden;
padding-right: 0px;
margin-right: 8px;
margin-top: 8px;
}
.titlebar #closeApp p {
margin-bottom: 0;
margin-top: -5.45px;
}
.titlebar #minApp {
font-weight: bold;
background: none;
float: right;
opacity: 0.55;
border: none;
outline: none;
font-family: Eight One;
font-size: 18pt;
overflow: hidden;
margin-top: 8px
}
.titlebar #minApp p {
margin-bottom: 0;
margin-top: -5.45px;
}
Have a great day! Let me know if you have a question or the solution just doesn't work for you!
Im trying to create this <a> element that pins left of the screen. Its position is absolute but I cannot get it as in image:
HTML:
<a class="feedback__btn">Feedback</a>
CSS:
.feedback__btn {
position: absolute;
top: 11.5%;
left: 0;
background: green;
width: 150px;
height: 45px;
color: red;
z-index: 9;
display: inline-block;
transform: rotate(270deg);
font-size: 24px;
font-weight: 900;
text-align: center;
line-height: 45px;
border-radius: 0px 0px 4px 4px;
}
Two things that cause the tag from not pinning to the left: transform and the width/height. How to to get it pinned to either sides of screen (left in this case) with the same transformation?
If you move the center-point of the button, with transform:translateX(-50%) you will have a much easier way to figure out how much you need to move the button to place it correctly:
.feedback__btn {
position: fixed;
top: 11.5%;
left: 23px;
background: green;
width: 150px;
height: 46px;
color: red;
z-index: 9;
display: inline-block;
transform: translateX(-50%) rotate(270deg);
font-size: 24px;
font-weight: 900;
text-align: center;
line-height: 45px;
border-radius: 0px 0px 4px 4px;
}
I have added transform: translateX(-50%) rotate(270deg); and left: 23px; to your code and changed the heigh of the button to an even number, as that is easier to halve (half of 46 is 23, while half of 45 is 22.5, and you can't have half pixels).
I have also changed the position to fixed, so it follows the user down the site when scrolling.
I have a button with just one character which I would like to have exactly in the middle of the button
<button>+</button>
I have the following css:
button {
border: 2px solid lightgrey;
border-radius: 20px;
background-color: #fff;
outline: none;
height: 40px;
width: 40px;
font-size: 30px;
font-weight: 700;
line-height: 30px;
color: grey;
cursor: pointer;
user-select: none;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
}
JSFIDDLE
I probably have to many css properties in here but I have tried many different solutions. I've tested this button on chrome, safari and iPad:
None of them seem to be exactly at the center of the button. How can I do this cross browser ?
UPDATE: Even with the suggestions given below, I still see differences in different browsers. It is still hard to pixel-perfect center the chars. The solution I switched to is to use a svg for the chars, which solves this problem.
Here, try this CSS only plus button. I prefer using SVGs for icons, but you can use this ccs only button too :)
Markup
<button class="plus-button plus-button--small"></button>
<button class="plus-button"></button>
<button class="plus-button plus-button--large"></button>
SCSS
.plus-button {
border: 2px solid lightgrey;
background-color: #fff;
font-size: 16px;
height: 2.5em;
width: 2.5em;
border-radius: 999px;
position: relative;
&:after,
&:before {
content: "";
display: block;
background-color: grey;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
&:before {
height: 1em;
width: 0.2em;
}
&:after {
height: 0.2em;
width: 1em;
}
}
.plus-button--small {
font-size: 12px;
}
.plus-button--large {
font-size: 22px;
}
https://jsfiddle.net/robi_osahan/gwgL7Loj/
You could try with these CSS:
button {
border: 2px solid lightgrey;
border-radius: 20px;
background-color: #fff;
outline: none;
height: 40px;
width: 40px;
cursor: pointer;
user-select: none;
position: relative;
}
span {
color: grey;
font-size: 30px;
font-weight: 700;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
Here's a jsfiddle: https://jsfiddle.net/e490xzpy/5/
button {
border: 2px solid lightgrey;
border-radius: 50%;
background-color: #fff;
outline: none;
height: 40px;
width: 40px;
font-size: 30px;
font-weight: 700;
line-height: 10px;
color: grey;
cursor: pointer;
user-select: none;
text-align: center;
display:block;
}
And the fiddler link is
https://jsfiddle.net/3gfkpm0h/1/
I didn't fork your code, in fact I was coding something similar myself. I'm sharing my experience with you about absolutely centering (or middling or whatever) the icon inside a button.
If you are using line-height and border at the same time, you should subtract the total width of the border (sum of top and bottom border-width),
Absolute centering may not always be satisfying with every font-face you use with the buttons. The centering may look a bit off due to that font's baseline.
So, here is my take. Two techniques that I often use for these kinds of things:
Subtract the border-width from the line-height and stay happy with it.
Bring it one step further by adding an extra element within the relatively positioned button, and absolutely middle it using CSS transforms!
Here are some examples for you to test it yourself.
.btn {
position: relative;
display: inline-block;
vertical-align: bottom;
border: 2px solid;
width: 40px;
height: 40px;
line-height: 36px;
/* line-height = (height) - (border-top-width) + (border-bottom-width); */
background-color: #fff;
border-radius: 50%;
font-weight: 700;
font-size: 30px;
}
.btn-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
line-height: 1;
}
<h3>Button without extra-element</h3>
<button class="btn">+</button>
<button class="btn">X</button>
<button class="btn">x</button>
<h3>Button with extra-element (.btn-icon)</h3>
<button class="btn"><span class="btn-icon">+</span></button>
<button class="btn"><span class="btn-icon">X</span></button>
<button class="btn"><span class="btn-icon">x</span></button>
See yourself what suits best for you. Hope it helped. Cheers!
i have a codepen where the react functionality works fine...
but when I transfer into another codepen with same code its not working...due to the below link tag...
can you guys tell me how to make the current code working without this link tag...with a normal css
providing my code below..
working code
http://codepen.io/anon/pen/qbgxdb
not working code
http://codepen.io/anon/pen/YwBeWZ
.fa-search {
color: #2980b9;
font-size: 30px;
position: absolute;
top: 7px;
left: 8px;
cursor: pointer;
}
.fa-times-circle {
opacity: 0;
color: #d9d9d9;
font-size: 20px;
position: absolute;
top: 12px;
right: 8px;
transition: opacity 0.4s ease-out;
cursor: pointer;
}
.search-input {
position: absolute;
cursor: default;
left: 45px;
top: 6px;
width: 0;
padding: 5px;
border: none;
outline: none;
font-size: 18px;
line-height: 20px;
background-color: rgba(255, 255, 255, 0);
transition: width 0.4s ease-out;
}
Just improve the css and it will work even without the font awesome link.
.fa-search {
color: #2980b9;
font-size: 30px;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
/* ------------------------- just add the css below */
height: 100%;
width: 100%;
border-radius: 50%;
}
Here is the working PEN
You can also specify exact pixel value as
height: 46px;
width: 46px;
as you outer div is with 50px height and 50px width with 2px border equals 46px height and 46px width as it has inherited box-sizing: border-box;