JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class = "cont">
 <div class="content-text">Вот здесь будет текстовочка</div>
 
 <div class="content-button"><a href="#">Далее</a></div>
 
 
 
</div>

CSS

.cont {
  width: 30em; /* поддерживаются любые единицы, в том числе проценты */
  height: 10em;
  margin: 1em auto;
  background: radial-gradient(circle at 50% 50%, rgba(227, 148, 79, 0.5), rgba(224, 134, 55, 0.5), rgba(199, 109, 31, 0.5));
  border-radius: 10px;
 
  padding: 1em;
  
 
  
 }
 
 .cont:hover {
 
    background: radial-gradient(circle at 50% 50%, rgba(227, 148, 79, 1), rgba(224, 134, 55, 1), rgba(199, 109, 31, 1));
 
 }
  .cont:hover > .content-button {
  	border: 3px solid white;
  }
	.cont:hover > .content-button > a{
  	color: white;
  }
 
.content-text {
 
    width: 100%;
    height: 70%;
    display: inline-block;
    overflow: hidden;
    text-align:left;
 
    
 }
 
 .content-text:hover, .cont:hover, .content-button:hover {
    color:#fff;
    border-color:#fff;
 }
 
 .content-button {
 
    width: 30%;
    height: 25%;
    border-radius: 5px;
    border: 3px solid black;
 
    display: inline-block;
    overflow: hidden;
    
    background: green;
    padding-top:0.5em;
    
 
 }
 
.content-button a {
    padding-left: 1em;
    padding-top: 10px;
    text-decoration: none;
}