How to style a button

HTML & CSS
1

I have this

<div id="close">
<button onclick="closeWin()">Close to return to previous page"</button>
</div>
<script>
var myWindow;

function closeWin() {
    myWindow.close();
}
</script>

How do I style the button to give it new background color, width, height, font, etc?

2

Just like any other element. Although when not within a form it might be more semantic to use other elements for CTAs… in this case, “return to previous page” would be a good candidate for an <a> tag with a fallback href, for instance.

3

Hi

I don’t want to send the visitor anywhere. I want him to close the page. Of course, it can be closed by the X in the top corner, but I found this little script but it needs changing its looks.

I put the code above inside a div and I can centre it but could not style the size of the button

4

It looks as if this code will not work as it need to be opened with similar javascript.

What I am trying to do is to open a new page with target=“_blank” which will not have any navigation, and obviously will not have a back button active. The only way to carry on is to close the page and be back on the original one.

The visitor has only one option: leave by clicking on the red X in the top corner (or pressing ALT F4).

I would like to place a large button, (with an explanation below: “Press to return to the previous page”) that did exactly the same.

How can do that be done?

6

As @m3g4p0p says rather than use a button you can just use a regular hyperlink tag. Then style that with CSS to look like a button

For example this is one i use on my site (i don’t claim it to be perfect)

<style> /*Square grey Button */ .grey_btn_sqr:visited{ color:#fff; } .grey_btn_sqr { background-color:#666; text-indent:0px; display:inline-block; color:#ffffff; font-family:'Open Sans', Arial; font-size:15px; font-weight:bold; font-style:normal; height:auto; padding:0 10px; line-height:34px; width:auto; text-decoration:none; text-align:center; border:none; } .grey_btn_sqr:hover { color:#ffffff; background-color:#999; text-decoration:none; }.grey_btn_sqr:active { position:relative; top:1px; } </style>

then on your link you can just add that class

<a href="#" onclick="closeWin()" class="grey_btn_sqr">Close this window</a>

You could add that class to the button as well or any bit of text you want.

So you could use a span if you wanted i guess

<span onclick="closeWin()" class="grey_btn_sqr">Close this window</span>

But you’d prob need to add some extra styling to get the correct cursor etc so it appear like a link.

7

My understanding is that you need to open the window with javascript also.

but I’ll try it
Thanks

8

you can open a new tab with _blank.

What are you trying to do exactly? a modal window could be the answer where it opens the page content in a ‘window’ over the current page. I use nyroModal and it’s pretty simple to do.

9

Imagine 2 webpages, each for one country. each has subsidiary pages for all sorts of things, including for instance a page on electrical current in that country.

Now imagine that another country comes along but this one has two cities. esch with its own page, say, London and Oxford. The electrical current is the same so there are going to be two indentical pages with different urls. Google does not like that.

I have worked out two ways of getting round the problem but am still looking for something more elegant.

The idea is that each city will link to the same page, but needs to return to the page where it was before. One solution was to give a choice of the towns: “Return to London” and “Return to Oxford” without using target blank… The other using target blank, simply asks the visitor to close the page via the x in the tab.

10

so would something like i have on this page do what you need
http://www.goodbeachguide.co.uk/beach/wembury#waterquality
if you click on the ‘designated bathing waters’ link in the first para it should open a ‘lightbox’ with info about water quality. This is the same information across many of my beach pages. I could pull in other information if i wanted simply using a dynamic page and a url query string or just link to individual static pages.

So for example you’d set up a page about electrical current for the uk and you’d just make a link to the lightbox to open it from the london page and the oxford page. If you did it dynamically like above you could stick all this info in a database and have an output page to link to and have the url determine which one to return e.g infopage.php?country=england&type=electric

if i have the right idea of what you need?!

1 Like
11

Yes and no!

Yes, the idea of a popup, My site started with that sort of thing but I had to give it up because Edge could not cope with it.

No, if I am unable to presetn the page with its sidebar and all.

I had thought of simply opening the page in a slightly reduced format so that the visitor could always see the main page below. the, it would be intuitive to close the smaller one to carry on with the main one.

12

too advanced for me and it is only about half-dozen pages

13

Link to the same subsidiary page about electricity from each city. (You could also set a canonical URL or mark one of them “noindex”, but simply having both link to the same page seems easier.)

14

Hi Technobar. Yes, that’s the easy part. The problem is returning to the correct main page.

15

If you’ve opened it in a new window/tab then as soon as they close it they will be left with the page they started with. You can still have a close this tab/window button if you want.

The lightbox doesn’t have to be as complicated as i made it. It will literally open any webpage you like.

16

Most browsers have a “Back” button as standard.
If you need an on page button, you could link to the sub-page with a url variable, Eg:

href="/electricity/?city=london"

Now you know from where they reached the sub page.
Then use that variable to set the url to what it should be in the link back button on the sub page.

17

I’ve placed a test page for you to see what I did

http://pintotours.net/TEMP1/indonesia.php

Click on “Electricity” in the left sidebar. Another page opens through target blank.

I’ve placed a box at the bottom; it would be nice if it was clickable and did just what it instructs the visitor to do

18

I would still say that the right thing to do, and the easy thing to do, in this case coincide. Don’t open it in a new tab/window. Open the link the way links were designed to be opened, in the same tab/window. (The user can always choose to open in a new tab, but you shouldn’t take that control away from them. It causes accessibility/usability issues.)

1 Like
19

TechnoBear

I know, and my other system works as you suggest.

But what i want to know is how I could turn that box into a button that closes the page.

20

I tried this but obviously I did not understand it. When I click I end up back on the page I want to close

<style>
#close{

margin:0 auto;
margin-top:100px;
border:solid gray 5px;
background-color:#F1E3D5;
color:black;
max-width:60%;
padding:30px 0 20px 0;
}

#close p{
text-align:center !important;
line-height:160%;

}

#close b{
color:crimson;
font-size:20px;
}
.advert{

padding-top:20px;
}
#close span{
text-align:center;
margin:0 auto;
}
</style>
<div id="close">

<a href="#" onclick="closeWin()"><p> To return to the previous page <br><b>close this tab only</b><br>Press the little x at the top in the tab<br> not in the top right corner.</p>

 </a>

</div>
21

If you want a link back the the page, something like:-

<a href="<?php echo $_SERVER['HTTP_REFERER'] ; ?>">Go Back</a>

Only Referer is not that reliable, which is why I suggested a variable set in the link on the source page.

<a href="current.php?city=jakarta">

Then on the “current” page you have

if (isset($_GET['city'])) { $city = preg_replace('#[^a-z]#iu', '', $_GET["city"]);

and the link

<a href="<?php echo $city; ?>".php>Go Back</a>

Or something along those lines.