Comment implémenter les boutons CSS ? Introduction à plusieurs méthodes d'implémentation de boutons CSS-tutoriel CSS-php.cn

Comment implémenter les boutons CSS ? Introduction à plusieurs méthodes d'implémentation de boutons CSS

不言

Libérer： 2019-04-12 15:13:26

original

2544 Les gens l'ont consulté

Afin de rendre la page Web belle, nous pouvons parfois avoir besoin d'implémenter des effets de bouton, c'est pourquoi dans cet article nous présenterons plusieurs méthodes d'implémentation de boutons CSS. Les amis dans le besoin peuvent s'y référer.

Comment implémenter les boutons CSS ? Introduction à plusieurs méthodes d'implémentation de boutons CSS

La structure de tous ces boutons dans cet article ne nécessite qu'une seule balise d'ancrage, puisque nous utiliserons la pseudo-classe ::before pour créer les autres éléments.

Exemple 1 :

Dans un premier temps, nous donnerons le style général du bouton, y compris son état actif. Il est important de faire attention au positionnement relatif car cela nous aidera à positionner l'élément ::before plus tard :

CSS

.a_demo_one {
	background-color:#ba2323;
	padding:10px;
	position:relative;
	font-family: &#39;Open Sans&#39;, sans-serif;
	font-size:12px;
	text-decoration:none;
	color:#fff;
	border: solid 1px #831212;
	background-image: linear-gradient(bottom, rgb(171,27,27) 0%, rgb(212,51,51) 100%);
	border-radius: 5px;
}

.a_demo_one:active {
	padding-bottom:9px;
	padding-left:10px;
	padding-right:10px;
	padding-top:11px;
	top:1px;
	background-image: linear-gradient(bottom, rgb(171,27,27) 100%, rgb(212,51,51) 0%);
}

Copier après la connexion

Ensuite, nous créons le conteneur gris en utilisant le ::before pseudo-élément. Utiliser le positionnement absolu pour positionner nos éléments :

CSS

.a_demo_one::before {
	background-color:#ccd0d5;
	content:"";
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	padding:8px;
	left:-8px;
	top:-8px;
	z-index:-1;
	border-radius: 5px;
	box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
}

Copier après la connexion

Exemple 2 :

CSS

.a_demo_two {
	background-color:#6fba26;
	padding:10px;
	position:relative;
	font-family: &#39;Open Sans&#39;, sans-serif;
	font-size:12px;
	text-decoration:none;
	color:#fff;
	background-image: linear-gradient(bottom, rgb(100,170,30) 0%, rgb(129,212,51) 100%);
	box-shadow: inset 0px 1px 0px #b2f17f, 0px 6px 0px #3d6f0d;
	border-radius: 5px;
}

.a_demo_two:active {
	top:7px;
	background-image: linear-gradient(bottom, rgb(100,170,30) 100%, rgb(129,212,51) 0%);
	box-shadow: inset 0px 1px 0px #b2f17f, inset 0px -1px 0px #3d6f0d;
	color: #156785;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
	background: rgb(44,160,202);
}

Copier après la connexion

<🎜 Depuis le la position du pseudo-élément dépend de son élément parent, une fois l'élément parent descendu de quelques pixels, le pseudo-élément avec le même nombre de pixels doit être déplacé vers le haut.

CSS

.a_demo_two::before {
	background-color:#072239;
	content:"";
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	padding-left:2px;
	padding-right:2px;
	padding-bottom:4px;
	left:-2px;
	top:5px;
	z-index:-1;
	border-radius: 6px;
	box-shadow: 0px 1px 0px #fff;
}

.a_demo_two:active::before {
	top:-2px;
}

Copier après la connexion

Exemple 3 :

La première chose que nous devons faire est de créer la partie facile. Ici, vous remarquerez une marge droite, celle-ci sert à compenser la largeur du pseudo-élément si vous souhaitez que le bouton soit centré.

.a_demo_three {
	background-color:#3bb3e0;
	font-family: &#39;Open Sans&#39;, sans-serif;
	font-size:12px;
	text-decoration:none;
	color:#fff;
	position:relative;
	padding:10px 20px;
	border-left:solid 1px #2ab7ec;
	margin-left:35px;
	background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
}

.a_demo_three:active {
	top:3px;
	background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
	box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}

Copier après la connexion

Ensuite, il y a des pseudo-éléments :

.a_demo_three::before {
	content:"·";
	width:35px;
	max-height:29px;
	height:100%;
	position:absolute;
	display:block;
	padding-top:8px;
	top:0px;
	left:-36px;
	font-size:16px;
	font-weight:bold;
	color:#8fd1ea;
	text-shadow:1px 1px 0px #07526e;
	border-right:solid 1px #07526e;
	background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
}

.a_demo_three:active::before {
	top:-3px;
	box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
}

Copier après la connexion

Cet article est partout ici Pour un contenu plus passionnant, vous pouvez suivre le site Web PHP chinois

CSS. tutoriel vidéocolonne ! ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!