Untitled

<style>
.btn {
background-color: #FFFFFF; /* #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}
.btn1 {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50;
}
.btn1:hover {
    background-color: #4CAF50;
    color: white;
}
</style>
</head>
<body>

<h2> Boton con hover on </h2>

 <button id="Btn11" data-color="rgb(229, 57, 53)" class="btn btn1" onclick="myFunctio1('Btn11')">Dar Click</button>

<script>
var count1=1;
function myFunctio1(btn) {
    var b1 = document.getElementById(btn).value;
    var c1 = 0;
    if (count1 == 0) {
    document.getElementById(btn).style.background = 'white';
    document.getElementById(btn).style.color = 'black';
        c1 = 0;
        count1 = 1;
      }
     else {
    document.getElementById(btn).style.background = 'blue';
    document.getElementById(btn).style.color = 'white';
        c1 = 1;
        count1 = 0;
      }
      return b1,c1;
}

</script>