I want my btn class to be shifted right. I have two button classes eg. btn-full, btn-ghost, I want to shift both of them to the right, if I float it to right then their position changes, I don't know why.
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href='https://fonts.googleapis.com/css?family=Lato:400,100,300,300italic' rel='stylesheet' type='text/css'>
<title>Musica</title>
</head>
<body>
<header>
<div class="hero-text-box">
<h1>Life is the Song.<br> Love is the Music.</h1>
<a class= "btn btn-full" href="#">Listen </a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</header>
</body>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
background-color: #fff;
color: #555;
font-family: 'Lato','Arial',sans-serif;
font-weight: 300px;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.row{
max-width: 1140px;
margin: 0 auto;
}
header{
background-image:linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)),url(img/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-text-box{
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1{
float: right;
margin: 0;
margin-bottom: 20px;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 4px;
}
.btn:link,
.btn:visited{
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
color: #fff;
transition: background-color 0.2s, border 0.2s, color 0.2s;
margin-top: 150px;
}
.btn-full:link,
.btn-full:visited{
background-color: #2ecc71;
border: 1px solid #2ecc71;
color: #fff;
margin-right: 15px;
}
.btn-ghost:link,
.btn-ghost:visited{
border: 1px solid #2ecc71;
color: #2ecc71;
}
.btn:hover,
.btn:active{
background-color: #1e874b;
}
.btn-full:hover,
.btn-full:active{
border: 1px solid #1e874b;
}
.btn-ghost:hover,
.btn-ghost:active{
border: 1px solid #1e874b;
color: #fff;
}
I tried everything like float:right, the position:absolute; ;left:-5oo; but it doesnot work. Please help
Maybe you want something like this ?
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
background-color: #fff;
color: #555;
font-family: 'Lato','Arial',sans-serif;
font-weight: 300px;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.row{
max-width: 1140px;
margin: 0 auto;
}
header{
background-image:linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)),url(img/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-text-box{
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align:right;
}
h1{
margin: 0;
margin-bottom: 20px;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 4px;
}
.btn:link,
.btn:visited{
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
color: #fff;
transition: background-color 0.2s, border 0.2s, color 0.2s;
}
.btn-full:link,
.btn-full:visited{
background-color: #2ecc71;
border: 1px solid #2ecc71;
color: #fff;
margin-right: 15px;
}
.btn-ghost:link,
.btn-ghost:visited{
border: 1px solid #2ecc71;
color: #2ecc71;
}
.btn:hover,
.btn:active{
background-color: #1e874b;
}
.btn-full:hover,
.btn-full:active{
border: 1px solid #1e874b;
}
.btn-ghost:hover,
.btn-ghost:active{
border: 1px solid #1e874b;
color: #fff;
}
</style>
<body>
<header>
<div class="hero-text-box">
<div><h1 style="display:inline-block; text-align:left;">Life is the Song.<br> Love is the Music.</h1></div>
<a class= "btn btn-full" href="#">Listen </a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</header>
</body>
EXP:
.btn:link,
.btn:visited{
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
color: #fff;
transition: background-color 0.2s, border 0.2s, color 0.2s;
margin-top: 150px;
}
margin-top: 150px; //You were trying to manually place the buttons with this line I suggest, you could've get away with it if you adjusted the positioning of the buttons, but this would be a bad practice.
Instead, I just Ordered the div to have its content aligned to the right,
and put the H1 inside a div, then align the H1 to the left in order to have a perfectly left aligned text.
Related
body {
font-family: Bahnschrift SemiBold, sans-serif;
background-color: #fcfefe;
width: 100%;
height: 100%;
overflow-x: hidden;
}
*{
margin:0; padding: 0;
}
.logonav{
position: top;
left: 0px;
width: 250px;
height: 65px;
padding-top: 70px;
padding-bottom: 20px;
padding-left: 40px;
}
.content{
position: absolute;
bottom: 330px;
left: 30px;
text-align: justify;
font-size: 20px;
font-family: 'Titillium Web', sans-serif;
color: #ffffff;
}
.bn632-hover {
position: absolute;
bottom: 200px;
left: 1200px;
width: 160px;
font-size: 16px;
font-weight: 600;
color: #00bbf0;
cursor: pointer;
margin: 20px;
height: 55px;
text-align:center;
color: whitesmoke;
border: none;
background-size: 300% 100%;
border-radius: 50px;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.bn632-hover:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.bn632-hover:focus {
outline: none;
}
.bn632-hover.bn18 {
background-image: linear-gradient(
to right,
#25aae1,
#00bbf0,
#00bbf0,
#00bbf0
);
box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}
.image_container.img{
max-height: 100vh;
max-width: 100%;
object-fit: cover;
object-position: bottom;
}
.pozadina{
background-color: #83a3c7;
background-image: url("womandoctor.jpg");
background-size: cover;
width: 110%;
background-blend-mode: normal;
position: relative;
padding-top: 450px;
padding-bottom: 100px;
}
.hornav1{
overflow: hidden;
width: 100%;
background-color: #00bbf0;
list-style-type: none;
margin: 0px;
padding: 0px;
border-bottom: solid 2px #eaf6f6;
size: 100px;
position:fixed;
top:0;
z-index:100;
}
.hornav1 a{
float: right;
color: whitesmoke;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
box-sizing: border-box;
margin-left: 5px 10 px;
}
.hornav1 i{
color: whitesmoke;
}
#pocetna{
padding-right: 1000px;
font-size: 20px;
}
.hornav2{
overflow: hidden;
width: 100%;
background-color: #ffffff;
list-style-type: none;
margin: 0px;
padding: 0px;
position: sticky;
top: 0px;
border-bottom: solid 2px #eaf6f6;
}
.hornav2 a{
float: right;
color: #333;
text-align: center;
padding: 14px 16px;
font-size: 17px;
box-sizing: border-box;
margin-left: 5px 10 px;
}
.hornav3{
overflow: hidden;
width: 100%;
background-color: #00bbf0;
list-style-type: none;
margin: 0px;
padding: 10px;
position:sticky;
border-bottom: solid 2px #eaf6f6;
size: 150px;
}
.hornav3 a{
position: relative;
color: whitesmoke;
text-align: center;
padding-left: 50px;
text-decoration: none;
font-size: 24px;
box-sizing: border-box;
right : -270px;
}
.navcontainer{
top:0;
width:100%;
z-index:100;
}
.hornav3 a::before{
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 2px;
background-color: whitesmoke;
transition: width 0.6s cubic-bezier(0.5, 1, 0.5, 1);
}
#media (hover: hover) and (pointer: fine) {
.hornav3 a:hover::before{
left: 0.5;
right: auto;
width: 70%;
}
}
.pregledi{
background-color: #fafafa;
}
.pregledi .heading{
padding-top: 40px;
text-transform: uppercase;
color: deepskyblue;
text-align: center;
font-size: 35px;
}
.pregledi .heading2{
padding-top: 5px;
text-align: center;
font-size: 20px;
font-family: unset;
color: #2c5d63;
}
.pregledi .box-container{
padding-top: 30px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 7fr));
gap:4rem;
margin-left: 60px;
margin-right: 30px;
}
.pregledi .box-container .box h3{
padding-top: 10px;
color: deepskyblue;
text-transform: uppercase;
font-size: 2.1rem;
}
.pregledi .box-container .box p{
padding-top: 10px;
font-family: sans-serif;
font-size: 1rem;
line-height: 1;
}
.pregledi .box-container .box a{
position: relative;
top: 10px;
}
.bn111 {
margin-top: 10px;
padding: 1.3em 0.01em;
font-size: 12px;
text-transform: uppercase;
text-indent: 10px;
letter-spacing: 2.5px;
font-weight: 500;
color: #ffffff;
background-color: #00bbf0;
border: none;
border-radius: 45px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
transition: all 0.24s ease 0s;
cursor: pointer;
outline: none;
}
.bn111:hover {
background-color: #00bbf0;
box-shadow: 0px 15px 20px rgba(34, 180, 255, 0.4);
color: #ffffff;
transform: translateX(7px) translateY(-1.1px);
}
.bn111:active {
transform: translateY(-1px);
}
.bn111 i{
color: #ffffff;
font-size: 1.3em;
padding-right: 4px;
}
.izborna{
background-color: #83a3c7;
background-size: cover;
width: 100%;
background-blend-mode: normal;
opacity: 1;
display: block;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.containerslike{
position: relative;
width: 100%;
max-width: 400px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .3s ease;
background-color: #ececec;
}
.containerslike:hover .overlay {
opacity: 0.5;
}
.ikona {
color: deepskyblue;
font-size: 40px;
position: absolute;
top: 100%;
left: 45%;;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
opacity: 1;
}
.fa-magnifying-glass{
position: absolute;
top: 100px;
}
.bn112 {
margin-top: 10px;
padding: 1.3em 0.01em;
font-size: 18px;
text-transform: uppercase;
text-indent: 10px;
letter-spacing: 2.5px;
font-weight: 500;
color: #ffffff;
background-color: #00bbf0;
border: none;
border-radius: 45px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
transition: all 0.24s ease 0s;
cursor: pointer;
outline: none;
width: 400px;
}
.bn112:hover {
background-color: #00bbf0;
box-shadow: 0px 15px 20px rgba(34, 180, 255, 0.4);
color: #ffffff;
transform: translateY(-1.1px);
}
.bn112:active {
transform: translateY(-1px);
}
.bn112 i{
color: #ffffff;
font-size: 1.3em;
padding-right: 4px;
}
.podnopregled{
margin-left: 500px;
}
.infodiv{
margin-top: 30px;
background-color: deepskyblue;
}
.row {
display: flex;
width: 100%;
}
.noMargin {
margin: 1px;
}
.one {
background-color: #79c2d0;
border: solid #ececec;
height: 300px;
width: 100%;
border-radius: 15px;
margin-top: 30px;
}
.two {
background-color: #79c2d0;
border: solid #ececec;
height: 300px;
width: 100%;
border-radius: 15px;
margin-top: 30px;
}
.three {
background-color: #79c2d0;
border: solid #ececec;
height: 300px;
width: 100%;
border-radius: 15px;
margin-top: 10px;
}
.four {
background-color: #79c2d0;
border: solid #ececec;
height: 300px;
width: 100%;
border-radius: 15px;
margin-top: 10px;
}
.noMargin p{
text-align: center;
margin-top: 100px;
}
#media only screen and (max-width:800px) {
/* For tablets: */
.main {
width: 80%;
padding: 0;
}
.right {
width: 100%;
}
}
#media only screen and (max-width:500px) {
/* For mobile phones: */
.menu, .main, .right {
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>VivaMed medicina rada i sporta</title>
<script src="https://kit.fontawesome.com/60681a69ff.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="VivamedCSS.css">
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<div class="navcontainer">
<div class="hornav1">
<i class="fas fa-envelope" style="font-size:20px;"></i> info#vivamed.hr
<i class="fa-solid fa-phone"style="font-size:20px;" ></i> +385 1 233 55 00
Početna
</div>
<div class="hornav2">
<img src="vivalogo.webp" alt="logo" class="logonav">
<a class="active" style="font-size: 20px; padding-right: 550px; padding-top: 100px; font-family: 'Titillium Web', sans-serif; font-style: italic; font-weight: bolder;"> Zdrav radnik je uspješan i produktivan radnik.</a>
</div>
<div class="hornav3">
<a class="active" href="https://www.vivamed.hr/kontakt"><i class="fas fa-envelope" style="font-size:20px;"></i> Kontakt</a>
<a class="active" href="https://www.vivamed.hr/kontakt"><i class="fas fa-cloud" style="font-size:20px; color: whitesmoke;"></i> Kontakt</a>
<a class="active" href="https://www.vivamed.hr/kontakt"><i class="fas fa-comment" style="font-size:20px;"></i> Kontakt</a>
<a class="active" href="https://www.vivamed.hr/kontakt"><i class="fas fa-car" style="font-size:20px;"></i> Kontakt</a>
<a class="active" href="https://www.vivamed.hr/galerija"><i class="fas fa-bolt" style="font-size:20px;"></i> O nama</a>
<a class="active" href="file:///C:/Users/Admin/Desktop/Vivamed/VIVAMED%20JEDAN.html#slide-2"><i class="fas fa-envelope"></i> Početna</a>
</div>
</div>
<div class="pozadina">
<div class="content">
<h3>Dobro došli na stranicu Medicine rada i sporta VivaMed!</h3>
<p>Pogledajte sve profesionalne usluge koje nudi
<br>naš tim vrhunskih i renomiranih stručnjaka!
</p>
</div>
<button class="bn632-hover bn18">Naručite se!</button>
</div>
<section class="pregledi" id="pregledi">
<h1 class="heading"> <span> Stručno, brzo i povoljno! </span> </h1>
<h2 class="heading2"> <span>Izdvojeni pregledi</span></h3>
<div class="box-container">
<div class="box">
<div class="containerslike">
<img src="pexels-pixabay-262524.jpg" class="izborna">
<div class="overlay">
<a href="https://www.vivamed.hr/usluge/pregledi" class="ikona">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</div>
</div>
<h3>Pregled sportaša</h3>
<p>Rekreativci, amateri, profesionalci</p>
<button class="bn111" id="bn111"> Opširnije<i class="fa-solid fa-arrow-right"></i></button>
</div>
<div class="box">
<div class="containerslike">
<img src="delivery-driver-smiling-camera-his-van_13339-235836.jpg" class="izborna">
<div class="overlay">
<a href="https://www.vivamed.hr/usluge/pregledi" class="ikona">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</div>
</div>
<h3>Pregled vozača</h3>
<p>Sve vrste kategorija i pregleda</p>
<button class="bn111" id="bn111"> Opširnije<i class="fa-solid fa-arrow-right"></i></button>
</div>
<div class="box">
<div class="containerslike">
<img src="happy-graduate-woman-mantle-rejoicing-laughing-smiling_176420-14226.webp" class="izborna">
<div class="overlay">
<a href="https://www.vivamed.hr/usluge/pregledi" class="ikona">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</div>
</div>
<h3>Učenici i studenti</h3>
<p>Upisi u srednje škole, fakultete i druge akadamske ustanove</p>
<button class="bn111" id="bn111"> Opširnije<i class="fa-solid fa-arrow-right"></i></button>
</div>
<div class="podnopregled">
<button class="bn112" id="bn112"> Svi pregledi<i class="fa-solid fa-arrow-right"></i></button>
</div>
</div>
</section>
<!--
-->
<div class="infodiv">
<div class="row noMargin">
<div class="one">
<p>Radno vrijeme<br>
ponedjeljak 07 - 15
utorak 07 - 18
srijeda 07 - 14
četvrtak 07 - 14
petak 07 - 14
i prema dogovoru </p>
</div>
<div class="two">
<p>Adresa<br>
Krešićeva ul. 32/1. Kat (okretište tramvaja Borongaj)</p>
</div>
</div>
<div class="row noMargin">
<div class="three">
<p>Email<br>
info#vivamed.hr</p>
</div>
<div class="four">
<p>Telefon<br>
+385 1 233 55 00</p>
</div>
</div>
</div>
</body>
</html>
I've been coding a website in html,css and used some javascript scripts to do it. It is a medical website and so far I've done a lot to the main page which is my main problem here. I am self-taught and all the paddings, margins and screen-fits that I've coded into it are were actually applying only to the screen size that is on my laptop, and not others. I've tested this by uploading the files to InfintyFree and making it online just for the sake of testing it on other screens, and what happens is that all the content is scattered around the screen. I've put some pictures to show how it looks in comparison with my laptop, other laptop that I have and my phone. Also I've put the html and css code if you can check it out and see where I screwed up and just point me to the core because I really cannot comprehend what is going on.
Thank in advance, and sorry if there was a question like this before, because I haven't found one.[][]
I have tried putting the *{} and changing properties with it, in the body{}, height, width, overflow, padding, margins, Media only screen, everything. Still, everything fixed but only on my laptop on which it was built.
So , i want to make the button wider , not auto size to the text , i want it like 300px , i just try to add width on every class , but nothing seems working , is it because the button box line from text border ? i think its because the button from text border , so its auto resize with the text , am i right about it ? if that was the problem, can i click on a col-md-6 div for example ?
body {
font-family: Arial, sans-serif;
background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat;
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Pure css popup box</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<h1>Popup/Modal Windows without JavaScript</h1>
<a class="button" href="#popup1">Let me Pop up</a>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
<!-- partial -->
</body>
</html>
EDITED Can i add href on col-md-6 class ?
SOLVED add display:inline-block;
a-tag is an inline element so your height and width set are ignored. Add display: inline-block; and width: 300px; in the class button.
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
display: inline-block;
width: 300px;
}
you do not need to add col-md-6 unless you want to use such space. Just add width property in the button class or in the custom class as per your need.
.button {
width: 300px;
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
display:block;
}
I'm trying to make these buttons a fixed size. Which is width 42px and height 25px. For some reason, they aren't the correct size. Just the standard one. I've looked for solutions but couldn't find one sadly. Sorry if my code is a bit messy, I'm a beginner and trying to make something work :)
Here is the HTML and CSS code
<!DOCTYPE html>
<html>
<head>
<title>Super epic game</title>
<link rel="stylesheet" type="text/css" href="mainstyles.css">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="https://fonts.googleapis.com/css?family=Lato:300&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=0.45">
</head>
<body>
<div class="container">
<div id="speelkader"> <canvas id="canvas" style="background-color: black;"></canvas></div>
<div id="attributen">
<button id="rood" class="color-changer" data-color="red">Rood</button>
<button id="groen" class="color-changer" data-color="green">Groen</button>
<button id="blauw" class="color-changer" data-color="blue">Blauw</button>
<button id="paars" class="color-changer" data-color="purple">Paars</button>
<button id="oranje" class="color-changer" data-color="orange">Oranje</button>
<button id="geel" class="color-changer" data-color="yellow">Geel</button>
<button id="wit" class="color-changer" data-color="white">Wit</button>
<button id="gum" class="color-changer" data-color="black">Gum</button>
<input type="button" id="reset" value="Reset tekening" onClick="window.location.reload()">
<div id="clear"></div>
</div>
</div>
<p id="center">Hallo! Gebruik de WASD toetsen om te bewegen :)</p>
<script src="gameJS.js"></script>
</body>
</html>
CSS
*
{
margin: 0;
padding: 0;
}
.container{
width: 1359px;
margin: auto;
}
#speelkader{
margin-top: 20px;
background-color: transparent;
float: left;
padding-right: 10px;
}
#attributen{
margin-top: 20px;
background-color: gray;
width: 500px;
height: 800px;
float: left;
}
#clear {
clear: both;
}
canvas{
background-color: black;
height: 800px;
width: 800px;
}
#groen{
background-color: green;
color: white;
width: 42px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
font-family: Lato;
border-color: black;
border-style: solid;
margin: 10px 10px 10px 10px;
}
#groen:hover{
background-color:darkgreen;
color: white;
transform: scale(1.15);
}
#rood{
background-color: red;
color: white;
width: 42px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
font-family: Lato;
border-color: black;
border-style: solid;
margin: 10px 10px 10px 10px;
}
#rood:hover{
background-color:darkred;
color: white;
transform: scale(1.15);
}
#blauw{
background-color: blue;
color: white;
width: 42px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
font-family: Lato;
border-color: black;
border-style: solid;
margin: 10px 10px 10px 10px;
}
#blauw:hover{
background-color:darkblue;
color: white;
transform: scale(1.15);
}
#paars{
background-color: purple;
color: white;
width: 42px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
font-family: Lato;
border-color: black;
border-style: solid;
margin: 10px 10px 10px 10px;
}
#paars:hover{
background-color:rgb(92, 0, 92);
color: white;
transform: scale(1.15);
}
#oranje{
background-color: orange;
color: white;
width: 42px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
font-family: Lato;
border-color: black;
border-style: solid;
margin: 10px 10px 10px 10px;
}
#oranje:hover{
background-color:darkorange;
color: white;
transform: scale(1.15);
}
#geel{
background-color: yellow;
color: white;
width: 42px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
font-family: Lato;
border-color: black;
border-style: solid;
margin: 10px 10px 10px 10px;
}
#geel:hover{
background-color:rgb(233, 233, 0);
color: white;
transform: scale(1.15);
}
#wit{
background-color: white;
color: black;
width: 42px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
font-family: Lato;
border-color: black;
border-style: solid;
margin: 10px 10px 10px 10px;
}
#wit:hover{
background-color: whitesmoke;
color: black;
transform: scale(1.15);
}
#gum{
background-color: gray;
color: white;
width: 42px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
font-family: Lato;
border-color: black;
border-style: solid;
margin: 10px 10px 10px 10px;
}
#gum:hover{
background-color: darkgray;
color: white;
transform: scale(1.15);
}
#reset{
background-color: darkred;
color: white;
width: 42px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
font-family: Lato;
border-color: black;
border-style: solid;
margin: 10px 10px 10px 10px;
}
#reset:hover{
background-color: rgb(114, 0, 0);
color: white;
transform: scale(1.15);
}
You have used separated id in styles for width and height and removed it all used ID height and width. Use the below code and it will work equal height and width for the button.
#attributen button[class=color-changer],
#attributen input[id="reset"] {
width: 140px;
height: 35px;
}
Add button type attributes with all the buttons and set it to button, your problem will get solve.
type="button"
I have this website with a showcase div, within the div I have a "Get Started" button. I am able to vertically align the button with the margin attribute. However I do not want to horizontally align the button with margin as this will lead to some trouble for me in the future, I've tried align: center; and align="center" but the button sticks to the left side of the showcase. How can I unstick this button and horizontally align it without having to use a margin attribute?
html,
body,
header {
position: absolute;
left: 0;
top: 0;
width: 100%;
margin: 0;
margin-top: 0;
margin: auto;
padding: 0;
}
h1 {
display: inline-block;
font-family: Trebuchet MS;
font-size: 75px;
letter-spacing: 3px;
margin: 10px 0px 0px 20px;
}
h2 {
display: inline-block;
flex-direction: row;
margin: 0px 0px 0px 50px;
font-family: Georgia;
}
.highlight {
color: #45d845;
}
.heading {
background-color: #d84545;
border-bottom: 5px solid black;
padding-top: 20px;
padding-bottom: 20px;
}
#comet {
font-size: 65px;
margin-left: 20px;
}
.showcase {
background: url('background1.jpeg');
border-bottom: 5px solid black;
height: 1000px;
width: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
color: #cccccc;
}
.showcase h2 {
color: #fff;
margin-top: 170px;
font-size: 60px;
font-family: Verdana;
text-align: center;
text-shadow: 1px 3px #000;
}
#start {
align: center;
margin-top: 130px;
background-color: transparent;
color: #fff;
padding: 20px 30px 20px 30px;
text-align: center;
font-family: Helvetica;
font-weight: bold;
border-radius: 10px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
#start:hover {
cursor: pointer;
background-color: #fff;
color: #000;
}
<header>
<div class="heading">
<h1>ThumbTac <span id="comet">☄</span> </h1>
</div>
</header>
<div class="showcase">
<h2>He moonlight difficult engrossed an it sportsmen. Interested has all devonshire difficulty jay assistance joy. Unaffected at ye </h2>
<button id="start" align="center">Get Started</button>
</div>
You can wrap your button in a div with the style text-align: center; to horizontally center your button. Example:
html, body, header{
position:absolute;
left:0;
top:0;
width: 100%;
margin: 0;
margin-top: 0;
margin: auto;
padding: 0;
}
/*Heading*/
h1{
display: inline-block;
font-family: Trebuchet MS;
font-size: 75px;
letter-spacing: 3px;
margin: 10px 0px 0px 20px;
}
h2{
display: inline-block;
flex-direction: row;
margin: 0px 0px 0px 50px;
font-family: Georgia;
}
.highlight{
color: #45d845;
}
.heading{
background-color: #d84545;
border-bottom: 5px solid black;
padding-top: 20px;
padding-bottom: 20px;
}
#comet{
font-size: 65px;
margin-left: 20px;
}
/*Showcase*/
.showcase{
background: url('background1.jpeg');
border-bottom: 5px solid black;
height: 1000px;
width: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
color: #cccccc;
}
.showcase h2{
color: #fff;
margin-top: 170px;
font-size: 60px;
font-family: Verndana;
text-align: center;
text-shadow: 1px 3px #000;
}
#start{
align: center;
margin-top: 130px;
background-color: transparent;
color: #fff;
padding: 20px 30px 20px 30px;
text-align: center;
font-family: Helvetica;
font-weight: bold;
border-radius: 10px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
#start:hover{
cursor: pointer;
background-color: #fff;
color: #000;
}
<header>
<div class="heading">
<h1>ThumbTac <span id="comet">☄</span> </h1>
</div>
</header>
<div class="showcase">
<h2>He moonlight difficult engrossed an it sportsmen.
Interested has all devonshire difficulty jay
assistance joy. Unaffected at ye </h2>
<div style="text-align: center;">
<button id="start">Get Started</button>
</div>
</div>
You can consider using a flexbox. Documentation in the CSS source.
/* Global Sets */
html,
body,
header {
position: absolute;
left: 0;
top: 0;
width: 100%;
margin: 0;
margin-top: 0;
margin: auto;
padding: 0;
}
/*Heading*/
h1 {
display: inline-block;
font-family: Trebuchet MS;
font-size: 75px;
letter-spacing: 3px;
margin: 10px 0px 0px 20px;
}
h2 {
display: inline-block;
flex-direction: row;
margin: 0px 0px 0px 50px;
font-family: Georgia;
}
.highlight {
color: #45d845;
}
.heading {
background-color: #d84545;
border-bottom: 5px solid black;
padding-top: 20px;
padding-bottom: 20px;
}
#comet {
font-size: 65px;
margin-left: 20px;
}
/*Showcase*/
.showcase {
background: url('background1.jpeg');
border-bottom: 5px solid black;
height: 1000px;
width: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
color: #cccccc;
display: flex; /* Added */
flex-direction: column; /* Added */
align-items: center; /* Added, horizonal alignment */
}
.showcase h2 {
color: #fff;
margin-top: 170px;
font-size: 60px;
font-family: Verndana;
text-shadow: 1px 3px #000;
text-align: center;
}
#start {
/* align: center; Not valid CSS */
margin-top: 130px;
background-color: transparent;
color: #fff;
padding: 20px 30px 20px 30px;
/* text-align: center; No longer required */
font-family: Helvetica;
font-weight: bold;
border-radius: 10px;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
}
#start:hover {
cursor: pointer;
background-color: #fff;
color: #000;
}
<header>
<div class="heading">
<h1>ThumbTac <span id="comet">☄</span> </h1>
</div>
</header>
<div class="showcase">
<h2>He moonlight difficult engrossed an it sportsmen. Interested has all devonshire difficulty jay assistance joy. Unaffected at ye </h2>
<button id="start" align="center">Get Started</button>
</div>
I'm having an issue customizing the CSS of some button widgets that came with a WordPress theme I'm running. I grabbed a quick screen capture video of what's happening because it's hard to describe.
Video Link: https://drive.google.com/open?id=1mYvOtAjz-0QnJYV3_nGYXnFoRpsRdVo_
The CSS I have applied on the buttons:
.lc_button {
height: 100px !important;
width: 200px !important;
font-size: 18px !important;
border: 1px solid #dd3333 !important;
text-align: center;
background-color: white;
border-radius: 5%;
}
.lc_button:hover {
background-color: white;
border: 4px solid #dd3333 !important;
color: #151515 !important;
}
.lc_button a:hover {
color: #151515 !important;
}
Any idea what I have to do to get the inside to stay visible no matter where the cusror is at inside the button?
Thanks
I've tried to solve your problem. I am successful. You can use this code of mine.
HTML
<div class="lc_button">
Watch video
</div>
CSS
.lc_button a {
display: block;
width: 200px;
height: 100px;
line-height: 100px;
font-size: 18px;
font-weight: 700;
color: #000000;
border-radius: 5%;
box-sizing: border-box;
transition: 0.3s;
background-color: white;
text-decoration: none;
text-transform: uppercase;
text-align: center;
position: relative;
}
.lc_button a:before {
display: block;
position: absolute;
border-radius: 5%;
left: 0;
top: 0;
content: "";
width: 200px;
height: 100px;
box-sizing: border-box;
border: 1px solid red;
transition: 0.3s;
}
.lc_button a:hover:before {
border: 4px solid red;
}
.lc_button a:hover {
color: #151515 !important;
background-color: #ffffff;
}
.lc_button a {
display: block;
width: 200px;
height: 100px;
line-height: 100px;
font-size: 18px;
font-weight: 700;
color: #000000;
border-radius: 5%;
box-sizing: border-box;
transition: 0.3s;
background-color: white;
text-decoration: none;
text-transform: uppercase;
text-align: center;
position: relative;
}
.lc_button a:before {
display: block;
position: absolute;
border-radius: 5%;
left: 0;
top: 0;
content: "";
width: 200px;
height: 100px;
box-sizing: border-box;
border: 1px solid red;
transition: 0.3s;
}
.lc_button a:hover:before {
border: 4px solid red;
}
.lc_button a:hover {
color: #151515 !important;
background-color: #ffffff;
}
<div class="lc_button">
Watch video
</div>
The .css you've provided seems fully functional, and customizable. (aka, not broken, works fine).
The whole .css and the .html might shed some light on things without any "major alterations".
.lc_button {
height: 100px !important;
width: 200px !important;
font-size: 18px !important;
border: 1px solid #dd3333 !important;
text-align: center;
background-color: white;
border-radius: 5%;
}
.lc_button:hover {
background-color: white;
border: 4px solid #0000ff !important;
color: #00ff00 !important;
}
.lc_button a:hover {
color: #151515 !important;
}
<body>
<button class="lc_button">Test</button>
</body>
I've shared the code snippet..I think this will help you to solve the problem...
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
font-family: 'PT Sans', sans-serif;
display: table;
width: 100%;
background: #f54785;
}
.container{
display: table-cell;
vertical-align: middle;
text-align: center;
height: 100vh;
}
button{
display: inline-block;
position: relative;
background: none;
border: none;
color: #fff;
font-size: 18px;
cursor: pointer;
margin: 20px 30px;
background: rgba(0,0,0,0.09);
}
span{
display: block;
padding: 25px 80px;
}
button::before, button::after{
content:"";
width: 0;
height: 2px;
position: absolute;
transition: all 0.2s linear;
background: #fff;
}
span::before, span::after{
content:"";
width:2px;
height:0;
position: absolute;
transition: all 0.2s linear;
background: #fff;
}
button:hover::before, button:hover::after{
width: 100%;
}
button:hover span::before, button:hover span::after{
height: 100%;
}
.btn-1::after{
left:0;
bottom: 0;
transition-duration: 0.4s;
}
.btn-1 span::after{
right:0;
top: 0;
transition-duration: 0.4s;
}
.btn-1::before{
right: 0;
top: 0;
transition-duration: 0.4s;
}
.btn-1 span::before{
left: 0;
bottom: 0;
transition-duration: 0.4s;
}
<div class="container">
<button class="btn-1"><span>Hover Me</span></button>
</div>
This will help you to solve the problem...
button {
height: 100px !important;
width: 200px !important;
font-size: 18px !important;
border: 1px solid #dd3333 !important;
text-align: center;
background-color: white;
border-radius: 5%;
}
button:hover {
background-color: white;
border: 4px solid #dd3333 !important;
color: #151515 !important;
}
button a:hover {
color: #151515 !important;
}
<div class="container">
<button class="lc_button"><span>Hover Me</span></button>
</div>