I came back to html&css coding after 10 years or something and quite a lot changed. I feel like Fred Flintstone in Black Mirror universe.
So I have maybe a little stupid question - how to position button in the middle of the div. I mean I text-aligned center in css. But horizontally its still in the top border. Ss below, I just made border of the div in PS to show how its built. Its also responsive so the row with the button go above row with the text when using phone.
Picture in here
.ghost-button {
display: inline-block;
padding: 15px 30px;
color: #fffff;
font-family: Inconsolata, monospace;
letter-spacing: 3px;
margin: 15px;
border-radius: 15px;
border: 2px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
transition: background-color 0.2s ease-out,
color 0.2s ease-out;
}
Please try with below code snippet
.ghost-button {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: auto;
}
Thanks!
Related
I know this should be a no-brainer, but for some reason I really just cannot figure out how to link my CSS transitions... I am attaching a website with widgets that act how I want mine to act: https://kion.io/resources
I love that when you hover on the widget, all CSS transitions happen at the same time over that one div/a href
I am attempting to do the same, and I have written all of my code but I have to hover individually over my elements... this is for a site that is not yet done, but I will post a link to the page that I am referring to. Specifically focusing on the widgets in the middle of the page. They scale up, BUT I want the arrows to move to the right when you hover over the entire div like in Kion's site. I can only figure out how to make them move when you hover over them specifically.
My site: https://cloudshape.net/cloudshape/
My code:
/*WIDGETS*/
.card a {
text-decoration: none;
color: black;
}
.card a:hover {
color: black;
}
.card {
font-family: 'helvetica', sans-serif;
margin: 25px;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
background-image: url('https://cloudshape.net/wp-
content/uploads/2022/02/clear-bg.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: background-image 2s ease-in-out;
}
.white-square {
width: 310px;
height: 330px;
background-color: white;
border: 2px solid black;
border-radius: 6px;
box-shadow: 0 0 10px 2px #202020;
padding: 15px;
text-align: center;
transition: transform .4s ease-in-out, border .4s ease-in-out;
}
/*WIDGET ARROW BUTTONS*/
.btn img {
width: 80px;
margin-top: -20px;
margin-left: 120px;
}
.btn img:hover {
margin-left: 130px;
}
.btn img {
transition: margin-left .7s ease;
}
<div class="card">
<a href="">
<div class="white-square">
<span class="icon"><img alt="security" src="https://cloudshape.net/wp-content/uploads/2022/02/shielddot-color.png"/></span>
<h5>Dev(Sec)Ops/SRE<br>Architecture & Modernization</h5>
<p>Short for development, security and operations — automates the integration of security at every phase of the software development lifecycle.</p>
<span class="btn"><img alt="button" src="https://cloudshape.net/wp-content/uploads/2022/02/arrow.png"/></span>
</div>
</a>
</div>
You could use this CSS rule to target your arrow when your white square is hovered :
.white-square:hover .btn img {
margin-left: 130px;
}
I want to implement a button. It is like this when it's not hovered:
the transparent rounded-bourder rectangle in the right is supposed to move left and cover the entire button in 1 second, when hovered. so, after hover, we'll have something like this:
My problem is that I don't know what to do. I found some code on the internet but either it comes from left to right or it pushes my arrow icon and text out of my button! I don't want my arrow icon or text change at all. I just want that the vright transparent rectangle move to right upon hover and then come back to it's original place.
My css code for my button withoug effect is this:
.btn {
color: white;
display: flex;
flex-direction: row-reverse;
Border: 2px solid white;
border-radius: 10px;
height: 80%;
padding-top: 10px;
width: 100%;
text-align: center;
margin-top: 0px;
padding-right: 0px;
vertical-align: middle;
text-decoration: none;
background-color: #fb815e;
font-size: 18px;
font-family: 'Vazir', sans-serif;
}
update:
The effect should also reverse with the same speed when there's no hover.
You'll want one element to be relative (wrapper) and the button / stretching part to be absolute. That way it will act as an overlay. You'll be relying on the transition for the one second, and width for the covering part.
This is, as far as I can tell, the exact button you want.
Edit: You asked for it to return, that's done by a second transition. One in the hover and a second one in the regular non-hover tag itself.
Disclaimer: I have no idea what the (Arabic?) text I used says.
.btn {
cursor: pointer;
height: 40px;
width: 200px;
color: white;
display: flex;
flex-direction: row-reverse;
border-radius: 10px;
vertical-align: middle;
text-decoration: none;
background-color: #fb815e;
font-size: 18px;
font-family: 'Vazir', sans-serif;
position: relative;
text-align: center;
line-height: 40px;
border: none;
margin: 0;
padding: 0;
}
.btn:hover .btn-inside {
width: 100%;
transition: width 1s ease;
}
.btn-inside {
opacity: 0.5;
border-radius: 10px;
background-color: #fc9c81;
width: 20%;
height: 40px;
line-height: 40px;
text-align: left;
position: absolute;
transition: width 1s ease;
}
.text {
margin: auto;
}
span {
display: inline-block;
}
<button class="btn">
<span class="text">العاشر ليونيكود</span>
<span class="btn-inside"> 🡠</span>
</button>
You can do something like
className:hover{
//do stuff here
}
and then play around with opacity or whatever you wish to :)
I've a small problem with text-align of my button.
Here's the button itself:
It has same padding:
But, the link itself gives extra height, not 2.3rem how I ask it to.
You can see that highlighted link gives extra space at the bottom, it's not centrelized.
Maybe someone know how to fix it?
Html:
Proceed to the Brief
SCSS:
.btn{
&,
&:link,
&:visited{
color: $color-white;
cursor: pointer;
border: none;
border-radius: $border-radius-medium;
background-color: $color-candy;
display: inline-block;
padding: 1.5rem 5rem;
font-size: 2.3rem;
#include FilsonProRegular;
text-align: center;
text-transform: uppercase;
transition: all .2s;
white-space: nowrap;
#include respond(tab-port){
padding: 1.5rem 4rem;
}
#include respond(phone){
width: 100%;
}
}
}
As #TemaniAfif said, that space is for the descender that certain characters like jpQç3 etc have. And you seem to be using a custom font with rather large descenders.
See explanation on fonts.com.
I have a page with a jumbotron header. the page is - http://www.mzungu.co.il/article.php?id=10
The size of the jumbotron is 40vmax:
.jumbotron {
background-image:url('images/<?php echo $article_cover ?>');
background:repeat:no-repeat;
background-size: 100%;
height: 35vmax;
background-position:center center;
color:#fff;
text-shadow:2px 2px 4px black;
}
the code i have tried so far is:
.jumbotron h1,
.jumbotron .h1 {
position:relative; top 30vmax;
}
with many different variations of position (fixed, absolute, etc) and with "margin top". could not find something that would work for both pc and mobile view.
Also, i wanted to create a background just for the text part, like in this pic
this maybe can help you out.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_hero_image
and for the background of the text you may do it like this.
.h1 {
margin: 0 auto;
width: 100px;
h1 {
padding: 6px;
display: block;
border-radius: 30px;
background: rgba(192,192,192,.7);
box-sizing: border-box;
font-size: 22px;
line-height: 1.8;
text-align: center;
text-decoration: none;
color: #fff;
transition: all 1s ease-out;
position: relative;
}
}
My button text appears on one line in safari (even after initial click) however on google chrome my button will appear on one line when you first get to the button however when you go through more posts and come across the load more button again the text is messed up. This only happens on google chrome.
when you get to the load more button the first time..
when you get to the load more button the second time..
here is my css... i've tried adding in width, although it solves the issue the button is then not centered
.elm-wrapper {
margin: 1em auto;
text-align: center;
}
.elm-button {
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
background-color: #ffffff;
text-shadow: none;
box-shadow: none;
border: none;
padding-top: 45px;
padding-bottom: 25px;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 19px;
color: #848484;
outline: none;
}
.elm-button.ajax-inactive {
display: none;
}
.elm-button.is-loading .elm-button-text {
display: none;
}
.elm-loading-anim {
display: none;
}
.elm-button.is-loading .elm-loading-anim {
display: block;
}
.elm-loading-icon {
width: 1.5em;
height: 1.5em;
}
.elm-button:not(.is-loading)::before {
content: "v";
font-size:11px;
float: right;
margin: 6px 0 0 16px;
font-family: 'Days One', sans-serif;
}
Would you like to try using:
.btn {
white-space: nowrap;
text-align: center;
}
While white-space: nowrap force the text in the button to never wrap, you can also make the button display as inline-block, so you don't have to give it a specific width.
You can just use non-breaking space ( ) between words in your html. It's rough but works in any browser.
Also better to set left and right paddings inside the button.