How can i make a text button in HTML

Question

I am making a photography website and I wanted to have a gallery of images and a list like

Wildlife
Landscape
Ocean

and when I click on them it opens a gallery of images.

I tried looking some tutorials up on youtube and google but couldn't find anything and since I'm not very experienced in HTML and CSS I don't know where to start

Currently I only have a gallery like this

<h1>###&nbsp;</h1>


<h1>###</h1>

<table align="center">
  <tr>
    <td>
      <img src="Images/plant_with_web.png" height="150" width="200" alt="rocks" />
    </td>
    <td>
      <img src="Images/rock_in_water.png" height="150" width="200" alt="rock_on_log" />
    </td>
    <td>
      <img src="Images/rock_on_log.png" height="150" width="200" alt="sunset" />
    </td>
  </tr>
  <tr>
    <td>
      <img src="Images/Rocks.png" height="150" width="200" alt="sun_on_beach" />
    </td>
    <td>
      <img src="Images/sunset.png" height="150" width="200" alt="rock_in_water" />
    </td>
    <td>
      <img src="Images/waves_crashing.png" height="150" width="200" alt="bird" />
    </td>
  </tr>
  <tr>
    <td>
      <img src="Images/bird.png" height="150" width="200" />
    </td>
    <td>
      <img src="Images/birdrock.png" height="150" width="200" />
    </td>
    <td>
      <img src="Images/DSC04758.jpg" height="150" width="200" />
    </td>
  </tr>

score 1 · Answer 1 · edited Apr 03 '22 at 13:21

You mean like this??

button {
    background-color:white;
    border:0px;
}

button:hover {
    text-decoration:underline;
    }

<button> Button 1 as a text
</button>

<button> Button 2 as a text
</button>

$(document).ready(function() {
  $("button#wildlife").click(function() {
    $(".wildlife> img").toggle();
    $(".landscape> img").hide();
    $(".ocean> img").hide();
  });

  $("button#landscape").click(function() {
    $(".landscape> img").toggle();
    $(".ocean> img").hide();
    $(".wildlife> img").hide();
  });

  $("button#ocean").click(function() {
    $(".ocean> img").toggle();
    $(".wildlife> img").hide();
    $(".landscape> img").hide();
  });

});

button {
  background-color: white;
  border: 0px;
}

button:hover {
  text-decoration: underline;
  cursor: pointer;
}

.landscape>img {
  display: none;
}

.ocean>img {
  display: none;
}

<html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<body>

  <button id="wildlife">Wildlife</button><br>
  <button id="landscape">Landscape</button><br>
  <button id="ocean">Ocean</button>

  <div class="wildlife">
    <img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
    <img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
    <img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
    <img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
    <img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
    <img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
  </div>

  <div class="landscape">
    <img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
    <img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
    <img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
    <img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
    <img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
    <img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
  </div>


  <div class="ocean">
    <img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
    <img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
    <img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
    <img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
    <img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
    <img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
  </div>
</body>

</html>

score 0 · Answer 2 · answered Apr 03 '22 at 06:02

0

I don't really understand your problem.

However, if you are trying to make a button then use the <input type='text'> button </input> or the button element.

Or if you want an image to be clickable then use <a href="image_URL"><img href="image_URL></a>"

answered Apr 03 '22 at 06:02

Bismillah S

1

i had also asked a question about clickable images you just answered that one thanks, i guess :D – Aashutosh Vyas Apr 03 '22 at 13:31

score 0 · Answer 3 · answered Apr 03 '22 at 06:06

0

If galleries are on their separate page: use <a href="SITE.COM/gallary/wildlife">Wildlife</a>

If galleries will open as a full screen pop-up: use <button id="wildlife">Wildlife</button>

You can also use <details><summary> element to get the same functionality without depending more on JavaScript

EDIT 1:

you can us a js library like PhotoSwipe, it could fit perfectly in your use case

answered Apr 03 '22 at 06:06

Nitin Kumar

77
4

1

alright ill try it – Aashutosh Vyas Apr 03 '22 at 13:32
1

this isnt exactly what i was looking for but will work perfectly for another project of mine thanks! – Aashutosh Vyas Apr 03 '22 at 13:34

score 0 · Answer 4 · answered Apr 03 '22 at 06:58

0

Use input type="submit" value="add"

Value mean Name This button name is add

answered Apr 03 '22 at 06:58

Asad Ali

1

score 0 · Accepted Answer · answered Apr 03 '22 at 09:36

0

I don't recommend the use of a table for a gallery. You can maybe put each gallery in a different html page and use the tag to access them. like:

<a href="wildlife.html">Wildelife</a>

But if you want them to appear or slide dynamically on the same page you may need some javascript or jquery.

answered Apr 03 '22 at 09:36

squallviii

16
3

i had considered the idea but specifically did not want to use it – Aashutosh Vyas Apr 03 '22 at 10:53

score 0 · Answer 6 · answered Apr 03 '22 at 09:43

0

you should use <a href="/"><img src="" alt="" /></a>

answered Apr 03 '22 at 09:43

Vinod

3
2

i didnt want to use seperate pages – Aashutosh Vyas Apr 03 '22 at 13:34

score 0 · Answer 7 · answered Apr 03 '22 at 10:29

0

Hey your question is a bit unclear, but if you want a button that you click that opens up a wildlife gallery you can have something like this <button> <a href = www.wildlife-photos.com/gallery></a> Wildlife </button> or just make a page called wildlife.html and make the button direct to it <button> <a href = wildlife.html></a> Wildlife </button>

I hope this helps :D Sorry if this isn't much of a direction.

answered Apr 03 '22 at 10:29

Wiaan.Duvenhage

51
6

i didnt want to make more pages because my website is supposed to be minimilistic – Aashutosh Vyas Apr 03 '22 at 10:52
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 03 '22 at 13:41

How can i make a text button in HTML

7 Answers7