Tutorial CSS – Stilizarea unui buton folosind elemente de CSS

octombrie 5, 2021

Data trecută am stabilit că următorul tutorial va fi despre stilizarea unui buton, ceva nu foarte complicat. Vom începe prin crearea unui document cu extensia .html, în cazul meu, l-am denumit index.html, iar apoi facem şi un document cu extensia .css, spre exemplu style.css.

Continuăm prin scrierea scheletului clasic, însă în plus adăugăm şi calea spre fişierul nostru CSS: <link rel=”stylesheet” href=”style.css”>, unde rel se referă la relaţia dintre documentul curent şi documentul la care trimite link-ul, iar href specifică URL-ul paginii web către care duce link-ul. Observăm că tag-ul link nu se închide şi de asemenea, trebuie să mai ţinem minte şi faptul că vom scrie întotdeauna în head această trimitere către documentul nostru CSS.

Continuăm cu body-ul documentului nostru HTML, unde vom insera un div cu clasa “my-button” (orice denumire vreţi) şi în interiorul div-ului inserăm un anchor link, adică link-ul paginii pe care o vom accesa atunci când apăsăm butonul nostru. Spre deosebire de link-ul inserat mai devreme în head, anchor link-ul acesta are şi tag de închidere. Între link şi tag-ul de închidere vom adăuga textul pe care dorim să îl scriem în buton, exact aşa ca în exemplul dat mai jos:

În documentul nostru cu extensia .css, începem stilizarea. Cum am mai spus şi în articolele trecute, selectăm o clasă prin ., exemplul nostru fiind .my-button {…}. La o primă vedere, observăm că avem unele proprietăţi care nu par greu de înţeles, precum background-color, width şi margin, despre care am vorbit şi data trecută, dar avem şi multe alte proprietăţi care poate au nevoie de puţin mai multă clarificare, cum ar fi:

  • justify-content aliniează orizontal elementele din container atunci când acestea nu ocupă tot spaţiul container-ului
  • display specifică comportamentul unui element
  • border-radius se referă la modul în care sunt rotunjite marginile butonului

Fiecare dintre aceste proprietăţi are diferite valori despre care mă gândesc să scriu pe viitor mai amănunţit. Dar până atunci, puteţi citi mai multe încât să vă faceţi o idee despre ce vorbesc şi pe următorul site: https://www.w3schools.com/css/default.asp

Apoi trecem la stilizarea link-ului. Am importat apoi un tip de font (https://fonts.google.com/), anume Roboto, iar pentru asta trebuie ca mai întâi să inserăm asta la începutul documentului nostru, sub forma:

Ce ne mai rămâne acum de făcut este stilizarea butonul şi link-ului atunci când trecem cursorul pe el, anume hover, cum vedem în următoarele poze Mai important cred eu că este selectorul ::after, un selector care inserează ceva după conţinutul fiecărui element selectat. În cazul nostru, acesta va insera săgetuţa ce apare după textul Go to Google, atunci când trecem cursorul peste buton. În content vom insera codul elementului pe care vrem să îl adăugăm. Pentru asta va trebui să îl căutăm pe Internet, iar un exemplu este următorul site:

https://www.w3schools.com/cssref/css_entities.asp

În cele din urmă, butonul nostru ar trebui să arate cam aşa:

Iar atunci când trecem cursorul desupra lui, ar trebui să arate aşa:

0 Comentarii

0 Comentarii

Înaintează un Comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Alte Articole

Ecommerce – Web-ul în 100 de pași

Ecommerce – Web-ul în 100 de pași

Odată cu apariția Internetului, o mare parte din viața noastră de zi cu zi s-a mutat în online. Dacă înainte ne puteam face cumpărăturile doar fizic, acum găsim online absolut orice poftim, la orice oră din zi sau noapte. Și toate acestea datorită ecommerce-ului, care...

Job în programare. Merită să faci facultate?

Job în programare. Merită să faci facultate?

Cum să înveţi programare? Vrei să înveţi programare dar nu te-ai convins încă dacă chiar merită? Ei bine, dacă ştii programare, reprezinţi clar o resursă valoroasă pentru angajatori. Mai mult, poți chiar lucra independent. Pe măsură ce industria de programare creşte,...

Meme – Web-ul în 100 de pași

Meme – Web-ul în 100 de pași

 Data trecută am vorbit despre conținutul viral, iar dacă ai citit articolul, probabil îți amintești de faptul că, printre exemple de conținut viral se numărau și meme-urile. Ei bine, ele au devenit o parte așa importantă din viața noastră încât dedicăm un articol...