Creating button with padding box?

HTML-CSS
1

ok so far I’m learning padding and margin and I thought I could create a button which leads to google.com on new window. Can you guys please help? Or is it something that i will learn in the future?

Your code so far


<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
  color: red;
  
}
h2 {
  font-family: Lobster, monospace;
}
.smaller-image {
  width: 100px;
  border-style: solid;
  border-color: green;
  border-radius: 50%;
  border-width: 10px;
}
.silver-box {
  background-color: silver;
}
p {
  font-family: monospace;
  font-size: 16px;
  
}


</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more</p><a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat"></a>

<div class="silver-box">
<p>Things cat love:</p>
<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>  

<p>Top 3 things cats hate:
  <ol>
    <li> flea treatment</li>
    <li> thunder </li>
    <li> other cats </li>
  </ol>
</div>
<form action="/submit-cat-photo" id="cat-photo-form">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit"> Submit</button>
 




</form>
</main>

<style>
.box {
  border-style: solid;
  border-width:5px;
  border-color: black;
}
.red-box {
  background-color:red;
  color: white;
  text-align: center;
  padding: 1.5em;
}
.blue-box {
  background-color: blue;
  color: white;
  text-align: center;
}
.yellow-box {
  background-color: yellow;
  padding: 20px 40px 20px 40px;
}
.injected-text {
  text-align: center;
  margin-bottom: -25px;
}


</style>



<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
  <h5 input type="button"a href="http://google.com" class="box red-box">padding</button></h5>
  <h5 class="box blue-box">padding</h5>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/adjust-the-padding-of-an-element/

2

Open link in a new window can be done by
<a href="www.google.com" target="_blank">Google</a>
Regards

1 Like
3

hey friend. first of all, twice a stylesheet isn’t neccesary, and everything can be put into the same stylesheet.

aniway inside the html you add a form, and in that form you put everything to send to a server in the end. so aslast after you put the submit. welldone for that! wat i recommend is. set in youre stylesheet just the button itself. like ‘button{’ and then youre code. ) or better set after the button a class=“wathever you like to name it” class can be everything/anything named, it reacts on the name, so create a class ‘class="button-submit’ now you have code to style the button to your heart. and set in that a padding for sample of 10px, now you get the idea. a tip i want to give you for later in the future is to set in youre html a ':root{ ’ and inside ’ font-size:10px ’ then in youre html the rem is as sample: 1rem is then equal to 10px. is much easier to work with that way. and rem you use for font-sized and ems are used for paddings exc- so 1ems of padding in youre class button-submit is then equal to 10px. some more and handy, maybe you don’t know, but the rem and ems calibrate with the devices height,and saved you for alot of troubles different devices. aniway i hope i helped you. sorry for more info then neccesary, but i be there too, “and stillf or half…” and iknow the struggle on that moment, and want to help you. and i’m not good, but the inf i learned i want to give you with the advice. keep coding. hope it helped you out. ow to lead to a new page set after the “submit” ’ target="_blank" ’ succes! someone else reply maybe much clearer and 10times 1000times more expereince. hope we help you out. we here for each other! :facepunch:t2: :grinning:

1 Like