Webleb - Snippets de Código -

1875 Andev.web

Abrir no Editor Publique Seu Código

Recomendado

28 November 2024

Menu de navegação de botões de rádio CSS

19 April 2025

Um Código de Metehan

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap');

body{
  font-family: 'Nunito', sans-serif;
  background-color:#f5f4f6 ;
}

*,
*::before,
*::after{
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
}

.container{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 100px 0px;
}

.list-container{
	width: 400px;
	text-align: center;
}

.card{
	height: 95px;
	width: 100%;
	background: white;
	margin-top: 10px;
	border-radius: 5px;
	cursor: pointer;
	display: flex;
	overflow: hidden;
	transition: 0.3s;
}

h2{
	padding-bottom: 14px;
}

.content-container{
	width: 80%;
	height: 100%;
	display: flex;
	align-items: center;
}

.game-image1{
	width: 70px;
	height: 70px;
	margin-left: 10px;
	background-image: url("https://play-lh.googleusercontent.com/WNWZaxi9RdJKe2GQM3vqXIAkk69mnIl4Cc8EyZcir2SKlVOxeUv9tZGfNTmNaLC717Ht");
	background-position: center;
	background-size: cover;
	border-radius: 5px;
}

.game-image2{
	width: 70px;
	height: 70px;
	margin-left: 10px;
	background-image: url("https://play-lh.googleusercontent.com/Lf-c_8Tk6ppqF8aGmMhWNDFvWDmKakkRXGXZh0e33xHlgJ4o3n7D-eIVCOGT8X7eeuY");
	background-position: center;
	background-size: cover;
	border-radius: 5px;
}

.game-image3{
	width: 70px;
	height: 70px;
	margin-left: 10px;
	background-image: url("https://play-lh.googleusercontent.com/uHoOYJbKRC6qIbZ6uhJHpK9LtVUb6kh85gDGvn3LRPAzJY9bCk9QvicK3fMRb2ELkQ");
	background-position: center;
	background-size: cover;
	border-radius: 5px;
}

.game-name{
	margin-left: 30px;
	font-size: 20px;
}

.image{
	width: 100%;
	height: 100%;
}

.rating{
	transition: 0.5s; 
	width: 20%;
	display: flex;
	align-items:center;
	justify-content: center;
	transform: translateX(100px);
}

.card:hover .rating{
	transform: translateX(0px);
}

.list-container:hover .card{
	filter: blur(5px);
	opacity: 0.5;
}

.list-container .card:hover{
	transform: scale(1.1);
	filter: blur(0px);
	opacity: 1;
}

Recomendado

Menu animado

Menu de navegação de botões de rádio CSS

Um Código de Metehan

HTML

CSS

JS

Recomendado

Menu animado

Menu de navegação de botões de rádio CSS

Um Código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS