Position of 'Call Us Today' Button above website body

Hi,
I’ve been searching high & low by reading, testing options and I cannot work out the positioning of a simple button!

I’m a novice at website building but I do OK with reading & learning via the WordPress forums. However I cannot work out how I can get a ‘button’ to sit to the right edge of the website body, in-line at a position above the website body over the right area of the menu (i.e. ‘Contact Us’ menu is at the extreme right).

The best option I found was a plugin called ‘Custom Header & Footers’ which gives you a a choice of ‘Meta Headers’; ‘Header’; ‘Footer’ & ‘Blog Footer’. It is the only plugin I can get any information (text or image etc.) above the website body in the empty area located above the menu / logo.

My trial and error did eventually get me the desired outcome which was great on my desktop; but as the theme is responsive I found the ‘Call Us Today! etc.’ button was either to one side or cut-off or even disappeared altogether depending on what smart device I used to view the website. This was due to the alignment from the right edge in pixels in the code which was great for my PC monitor; but not on any other device especially when responsive!

I then had a bright idea of using an on-line button generator site that you can visually create the button and then generate the HTML & CSS code to paste into your website. My idea was starting fresh with clean coding and just add ‘something’ for positioning. I did this and everything worked great but the button sits at the top left corner of the screen and the empty area above the menu / logo has increased pushing the website overall down the page!

My question is how do I fix this? I also want the button to dial the number on the button for any device when clicked. I read somewhere you use callto:+ rather than tel:+ which covers all smart devices & desktops I believe?!

My code is as follows:
HTML (inserted into Meta Headers of ‘Custom Header & Footer’ plugin

<a class="button" href="#">Call Us Today! (02) 9987 0252 </a>
NOTE: It’s a Sydney, Australia land line number.

CSS (inserted into Custom CSS of Theme for anything extra to add)

.button {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 12px 24px;
    border: 1px solid #3e8197;
    border-radius: 8px;
    background: #65d1f6;
    background: -webkit-gradient(linear, left top, left bottom, from(#65d1f6), to(#3e8197));
    background: -moz-linear-gradient(top, #65d1f6, #3e8197);
    background: linear-gradient(to bottom, #65d1f6, #3e8197);
    text-shadow: #27515f 1px 1px 1px;
    font: normal normal bold 20px arial;
    color: #ffffff;
    text-decoration: none;
}
.button:hover,
.button:focus {
    border: 1px solid #4ea1bd;
    background: #79fbff;
    background: -webkit-gradient(linear, left top, left bottom, from(#79fbff), to(#4a9bb5));
    background: -moz-linear-gradient(top, #79fbff, #4a9bb5);
    background: linear-gradient(to bottom, #79fbff, #4a9bb5);
    color: #ffffff;
    text-decoration: none;
}
.button:active {
    background: #3e8197;
    background: -webkit-gradient(linear, left top, left bottom, from(#3e8197), to(#3e8197));
    background: -moz-linear-gradient(top, #3e8197, #3e8197);
    background: linear-gradient(to bottom, #3e8197, #3e8197);
}
.button:before{
    content:  "000a0";
    display: inline-block;
    height: 24px;
    width: 24px;
    line-height: 24px;
    margin: 0 4px -6px -4px;
    position: relative;
    top: 0px;
    left: 0px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABdElEQVRIie3Sv0tVcRgG8E8XudzBJCLk4ugQ4nAhiIYIB5FGQRwcXGoUCcewLcQ/ICIiqElw0mrTQRehQLgtFwkXBQepLOJi5E2xH8N5i9PhHvTi6H3gy/d73nPO8zzf531po42z4kKTWhFXcQvXUEEPLqELx9iLfRM1rGMF9ZMEbuJekJfxEVW8xzd8DQNduIjhMHOEDTzFS+w3u00/PuN3as2iEA5/puq7GAojn1L1Q8ykSQupcw+upJ5r+IBB9GIZzzEfUYziF97iIP4poi8vohLehegcXmMinE7jSwjBNsbRjYeSOO8H+RQWmkUE11Mkd9DAg6g9k0S4hNuSpjfwIkx1YiD2f+jICFRT57G4VSGc1SOComSKKvHdkKR/G1jLOi5kC4FOSQNhUjKSOxjBE1zG3TBQxo0cnlwM+3+avmMVb/AKW5n3i60KPM4QnLQaeUR5ERVbNFRqVeCoRYEfeS+yU/QXj2I/zU2OJf1p47ziD3hkXOL5DS8jAAAAAElFTkSuQmCC") no-repeat left center transparent;
    background-size: 100% 100%;
}

HELP!!! If anyone could add the appropriate code into my code above so I don’t get any snippet code inserted wrong which I notice a lot of people have issues in forums…where to put it actually? I would very much appreciate any WordPress guru out there to help / advise.