JSFiddle - React, Tailwind, and code Playground

by Tikhonex

HTML

<input type="button" style="grow" class="css-button_1" value="Корпортивный&#10; портал" onClick='location.href="#"' > 
<input type="button" class="css-button_2" value="Служба&#10поддержки" onClick='location.href="#"' > 
<input type="button" class="css-button_3" value="Видео-&#10наблюдение" onClick='location.href="#"' > 
<input type="button" class="css-button_4" value="ЧАТ" onClick='location.href="#"' >
<input type="button" class="css-button_5" value="Почта" onClick='location.href="#"' >
<ul class="menu" style="display:none">
    <li>test 1</li>
    <li>test 2</li> 
    <li>test 3</li>
    <li>test 4</li>
</ul>

CSS

* {
	margin: 0px;
	padding: 0px;
	outline:none;
}
	
body { 
 background: url(../images/bg4.jpg) #F0EEF6;
}

a {
	text-decoration: none;
}

	
.css-button_1{ 
    height: 180px; 
    width: 180px; 
    padding: 3px; 
    text-align: center; 
    color: #000000; 
    font-family:impact;
	  font-size:25px;
    background: #E8E8E8; 
  	border-width: 5px; 
    border-style: solid; 
    border-color: #CFCFCF; 
    border-radius: 45px; 
	position: fixed; 
	left: 450px; 
	top: 70px;
	} 

.css-button_1:hover{ 
    cursor: pointer;
    border-width: 5px; 
    border-style: outsetOutset; 
    border-color: #FF0000; 
    border-radius: 45px; 
    box-shadow: 0px 0px 99px 10px #FFFFFF; 
    text-shadow: 0px 0px 13px #FFFFFF; 
}

.css-button_1:active{ 
    cursor: pointer;
    border-width: 5px; 
    border-style: outsetOutset; 
    border-color: #FF0000; 
    border-radius: 45px; 
    box-shadow: 0px 0px 99px 10px #FFFFFF; 
    text-shadow: 0px 0px 13px #FFFFFF;
}


.css-button_2{ 
    height: 180px; 
    width: 180px; 
    padding: 3px; 
    text-align: center; 
    color: #000000; 
    font-family:impact;
	font-size:25px;
    background: #E8E8E8; 
	border-width: 5px; 
    border-style: solid; 
    border-color: #CFCFCF; 
    border-radius: 45px; 
	position: fixed; 
	left: 740px; 
	top: 70px;
} 

.css-button_2:hover{ 
  cursor: pointer;
    border-width: 5px; 
    border-style: outsetOutset; 
    border-color: #FF0000; 
    border-radius: 45px; 
    box-shadow: 0px 0px 99px 10px #FFFFFF; 
    text-shadow: 0px 0px 13px #FFFFFF; 
}

.css-button_2:active{ 
    cursor: pointer;
    border-width: 5px; 
    border-style: outsetOutset; 
    border-color: #FF0000; 
    border-radius: 45px; 
    box-shadow: 0px 0px 99px 10px #FFFFFF; 
    text-shadow: 0px 0px 13px #FFFFFF;
}

.css-button_3{ 
     height: 180px; 
    width: 180px; 
    padding: 3px; 
    text-align: center; 
    color: #000000; 
    font-family:impact;
	font-size:25px;
    background: #E8E8E8; 
	border-width: 5px; 
   ...

JavaScript

$(':button').mouseover(function() {
    $(".menu").show();
    });
$(':button').mouseout(function() {
    $(".menu").hide();
});