Custom REFRESH button

HTML & CSS
1

I want to customize the look of a refresh button with the CSS below. Can’t seem to figure out how to apply this as I have done with normal hyperlinks.

Any help or any other type of refresh code would be appreciated.

<style media="screen">

.button {
    display:table-cell;
    border-radius: 7px;
    width: 12.38em;
    height: 2.40em;  
    padding: 0.23em;
    border: 0.16em solid #4c659b;
    vertical-align: middle;
    background-color: #4c659b;
    font-family: arial, helvetica, sans-serif;
    font-size: 0.9em;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    text-align: center;
    transition: 0.35s ease-in-out;
    outline:0;
 }

.button:hover, 
.button:active {
    border-color: #fff;
    background-color: #c4d7dd;
    color: #000;
    outline:0;
 }
</style>

<div><button onclick="refreshPage()">Refresh language here</button></div>
2

As button is an HTML element, not a class, the selector should be button, not .button (in three places).

BTW: do you need to put the button inside a <div> element?

1 Like
3

Of course, that makes sense. Thank you

1 Like