Easy HTML button "border"

Question

im currently working on my Personal Web Page. I have made a Starting page, that says my name and other stuff. I have a button, that I want to connect it to the Main Page. Here is the code: (It's Updated since the first code)

<!DOCTYPE html>
<html>
<head>
    <title>Welcome Page</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono" 
rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Patua+One" 
rel="stylesheet">
</head>

<body>

    <div class="heading">
        <span class="title1">Alexandros Kordatzakis</span>
        <span class="title2">Technology, Coding And More...</span>
        <button class="continue">Continue Reading About Me</button>
        <hr> 
    </div>
        <div id=Copyright>Copyright &copy;2017 Alexandros Kordatzakis.</div>

 </body>

 </html>

And CSS:

*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}

body{
background-color: #00469E;
background-position: center;
background-size: cover;
background-blend-mode: soft-light;
}
.heading{
width: 600px;
height: 300px;
margin: auto;
position: absolute;
top: 0px; bottom: 0px; right: 0px; left: 0px
}
.title1{
display: block;
text-align: center;
color:white;
font-size: 60pt;
font-family: big john;
}
.title2{
display: block;
margin-top: 30px;
text-align: center;
color:white;
font-size: 15pt;
font-family: 'Share Tech Mono', monospace;
}
.continue{
margin: 50px auto;
display: block;
width: 200px;
height:50px;
border:3px solid white;
background-color: rgba(255, 255, 255, 0);
color:white;
font-family: sans-serif;
font-weight: bold;
border-radius: 20px;
transition: background-color 1000ms, color 1000ms;
}
.continue:focus{
outline-width: 0px;
}
.continue:hover{
background-color: rgba(255, 255, 255, 1);
color: #222;
cursor: pointer;

 transition: background-color 1000ms, color 1000ms;
}
.continue:active{
border: 3px solid white;
border-radius: 50px; 
}
#Copyright{
clear: left;
background-color: #0053BC;
text-align: center;
padding: 12px;
height: 8px;
font-family: 'Patua One', cursive;
font-size: 18px;

}

Questions I have:

1) When the User press the button, "READ MORE ABOUT ME" it appears a blue line-border. Why?

2) How can I link this "Starting Page" to my main page?

Thanks!

**EDIT 1 : ** Some details, like Copyright and else, are not finished, so sorry for mistakes. Just help me with my questions! :)

**EDIT 2: ** I have thought about my page design and I think that it's better to make this code "Starting Page" and not allow the user to do anything else like rolling, then the user to press this button and "hide" this background and text and show my other content. My "biography". How can i do that? Thanks btw.

the blue line is probably the outline (https://developer.mozilla.org/en-US/docs/Web/CSS/outline) - what do you exactly mean with "link to my main page"? — Lorenzo Marcon, Oct 20 '17 at 12:27
1. What you see is the outline which appears everytime when button is focused, it's intended for accessibility. 2. if you want to link, say, anchor to you starting page just set its `href` attribute like so `/main.html`. — Konrud, Oct 20 '17 at 12:28
Here is the video where Rob Dodson is explaining why does it happen and what can you do to remove it if you want to without violating accessibility (https://www.youtube.com/watch?v=ilj2P5-5CjI&list=PLcKnOmazCUO-Sm_9AxTW3mGiov2DedUgf&index=26) — Konrud, Oct 20 '17 at 12:33
Possible duplicate of [How to remove the border highlight on an input text element](https://stackoverflow.com/questions/1457849/how-to-remove-the-border-highlight-on-an-input-text-element) — FRS, Oct 20 '17 at 12:36
@LorenzoMarcon Can you check my EDIT 2 please to understand what I mean by redirect? Thanks. — Alex Kordatzakis, Oct 20 '17 at 12:46
@Konrud Can you check my EDIT 2 please to understand what I mean by redirect? Thanks. — Alex Kordatzakis, Oct 20 '17 at 12:46
Where are you heading is called SPA (single page application). You can implement it using some framework say Angular / Knockout or you can do this using native javascript (e.g. hash tag and `hashchange` event). I suggest you search in Google for SPA implementation. — Konrud, Oct 20 '17 at 12:52

Στέφανος Παναγιωτίδης · Accepted Answer · 2017-10-20T14:17:06.870

To remove the focus outline use something like this:

.continue:focus{
outline-width: 0px;
}

To link a page use href. Example

<a href="www.example.com">Your Text Here</a>

EDIT 2:

To show content on button click I would do this:

First add a new div with your content inside like so, and another div to set the style of your info div:

<div id="yourInfo">
    <p>Your Content Here</p>
    <p>Your Content Here</p>
    <p>Your Content Here</p>
</div>

<div id="yourInfoStyle"></div>

Then you want to add this to your css file:

#yourInfo{
    display: none;
}

Lastly, we need to add a function to show and hide the div, so put this script in your html file:

<script>
    var shown = false;
    function showContent(){
        if(!shown){
            document.getElementById("yourInfoStyle").innerHTML = "<style type='text/css'>#yourInfo{display:block;}</style>";
            shown = true;
        } else {
            document.getElementById("yourInfoStyle").innerHTML = "<style type='text/css'>#yourInfo{display:none;}</style>";
            shown = false;
        }
    }
</script>

So here's the full code:

HTML:

    <!DOCTYPE html>
<html>
<head>
    <title>Welcome Page</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono" 
rel="stylesheet">
    <script>
        var shown = false;
        function showContent(){
            if(!shown){
                document.getElementById("yourInfoStyle").innerHTML = "<style type='text/css'>#yourInfo{display:block;}</style>";
                shown = true;
            } else {
                document.getElementById("yourInfoStyle").innerHTML = "<style type='text/css'>#yourInfo{display:none;}</style>";
                shown = false;
            }
        }
    </script>
</head>

<body>

    <div class="heading">
        <span class="title1">Alexandros Kordatzakis</span>
        <span class="title2">Technology, Coding And More...</span>
        <button class="continue" onclick="showContent()">Continue Reading About Me</button>
        <div id="yourInfo">
            <p>Your Content Here</p>
            <p>Your Content Here</p>
            <p>Your Content Here</p>
        </div>
        <div id="yourInfoStyle"></div>
        <hr>
        <span class="copyright">Copyright</span>
    </div>

</body>

</html>

CSS:

    *{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}

body{
background-color: #00469E;
background-position: center;
background-size: cover;
background-blend-mode: soft-light;
}

.heading{
width: 600px;
height: 300px;
margin: auto;
position: absolute;
top: 0px; bottom: 0px; right: 0px; left: 0px
}
.title1{
display: block;
text-align: center;
color:white;
font-size: 60pt;
font-family: big john;
}
.title2{
display: block;
margin-top: 30px;
text-align: center;
color:white;
font-size: 15pt;
font-family: 'Share Tech Mono', monospace;
}
.continue{
margin: 50px auto;
display: block;
width: 200px;
height:50px;
border:3px solid white;
background-color: rgba(255, 255, 255, 0);
color:white;
font-family: sans-serif;
font-weight: bold;
border-radius: 20px;

transition: background-color 1000ms, color 1000ms;
}
.continue:focus{
    outline: none;
}
.continue:hover{
background-color: rgba(255, 255, 255, 1);
color: #222;
cursor: pointer;

transition: background-color 1000ms, color 1000ms;
}
.continue:active{
border: 3px solid white;
border-radius: 100px;
}
.copyright{
}
#yourInfo{
    display: none;
}

Hope this helped you! :D

Καταρχήν Καλησπέρα! :)) Second, Can you see my EDIT 2 to understand what i mean by redirecting? Thanks. — Alex Kordatzakis, Oct 20 '17 at 12:48
Your href is correct, but i dont want to redirect the user to another page, just to another content. — Alex Kordatzakis, Oct 20 '17 at 12:48
Καλησπερα και σε σενα! :) Then I think it's better to put all the content in a new <> and only show it on button click! — Στέφανος Παναγιωτίδης, Oct 20 '17 at 12:54
Excactly this i want. Can you give me a sample or sth else to understand better please? — Alex Kordatzakis, Oct 20 '17 at 12:57
I can understand everything. But not the part that you are saying me to set my style of my info div. What do you mean? To be sure that im doing everything you said me: I'll add a
with all the code that i have wrote in the HTML. Then? :) — Alex Kordatzakis, Oct 20 '17 at 13:46
You add a
with all your content inside and also create an invisible
where you will put the — Στέφανος Παναγιωτίδης, Oct 20 '17 at 13:54
:)) Sorry, to bother you....... But can you make me a sample with my code, (i have updated it in the question) please? And ADD what you are saying to me? Im very new to HTML-CSS and dont know all the things.... But Thanks! — Alex Kordatzakis, Oct 20 '17 at 14:08
I have waste your time.. Thanks you so much!!! I'll try it. Surely its going to work, but just to know, THANKS!!!! — Alex Kordatzakis, Oct 20 '17 at 14:20

score 1 · Answer 2 · answered Oct 20 '17 at 13:02

1

To link your Starting page you can use the anchor tag. Ex in your Starting page:

<a href="www.example.com">(Name of the website)</a>.

For any help you can also visit w3shools. They provide the best tutorials.

answered Oct 20 '17 at 13:02

another programmer

23
6

Thanks BUT, i dont mean to redirect the user to another site. I mean just to "hide" the "Starting Page" with my name and when the button is pressed, to show in the same site-URLanother content. – Alex Kordatzakis Oct 20 '17 at 13:03

score 0 · Answer 3 · answered Oct 20 '17 at 12:49

0

Answer 1:

<button class="continue" style=".continue:focus{outline-width: 0px;}">Continue Reading About Me</button>

Answer 2:

<a href="www.example.com">example</a>

answered Oct 20 '17 at 12:49

Thanks for 1. But the second, i dont mean to redirect the user to another site. I mean just to "hide" the "Starting Page" and in the same site-URL to show another content. Help please? ! Thanks – Alex Kordatzakis Oct 20 '17 at 12:52
what do you want to show? Could you be more specific? – Oct 20 '17 at 13:39
Ok. When you first run the code, you will see a blue screen with my name, a slogan, a button and a copyright. I dont know how to do the following: User presses the button and the blue screen with content dissapears and it come the main site. With my bio and infos about me.\ – Alex Kordatzakis Oct 20 '17 at 13:48
In the same site – Alex Kordatzakis Oct 20 '17 at 13:49

Easy HTML button "border"

3 Answers3