Free Custom CSS for Astra Theme: Enhance Buttons, Images & Widgets with a Premium Look

 This Premium-looking Astra Custom CSS code snippet specifically designed to help improve Astra WordPress Theme. It is a focus on clean style as well as contemporary UI elements, as well as subtle improvements to widgets, buttons, images and forms to provide your site with a an elegant and professional appearance.

/* === Global Enhancements === */

body {

  font-family: 'Inter', sans-serif;

  line-height: 1.7;

  background-color: #f9f9fb;

  color: #2a2a2a;

}

/* === Primary Buttons === */

button, .ast-button, .button, .wp-block-button__link {

  background: linear-gradient(to right, #005bea, #00c6fb);

  color: #fff !important;

  padding: 12px 28px;

  font-size: 15px;

  font-weight: 600;

  border: none;

  border-radius: 50px;

  box-shadow: 0 4px 14px rgba(0, 91, 234, 0.3);

  transition: all 0.3s ease-in-out;

  text-transform: uppercase;

}

button:hover, .ast-button:hover, .wp-block-button__link:hover {

  background-position: right center;

  box-shadow: 0 6px 20px rgba(0, 91, 234, 0.4);

  transform: translateY(-2px);

}

/* === Featured Images === */

.post-thumbnail img, .wp-post-image {

  border-radius: 16px;

  box-shadow: 0 8px 24px rgba(23, 43, 99, 0.15);

  transition: transform 0.3s ease;

}

.post-thumbnail img:hover {

  transform: scale(1.02);

}

/* === Widget Titles === */

.widget-title, .ast-widget-title {

  background: linear-gradient(to right, #005bea, #00c6fb);

  color: #fff;

  padding: 10px 15px;

  font-size: 18px;

  border-radius: 8px;

  text-align: center;

  box-shadow: 0 4px 14px rgba(0, 91, 234, 0.2);

}

/* === Sidebar & Widgets === */

.widget {

  background-color: #ffffff;

  padding: 25px;

  margin-bottom: 30px;

  border-radius: 12px;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);

}

/* === Search Form Styling === */

.search-form input[type="search"] {

  border-radius: 30px;

  padding: 10px 20px;

  border: 1px solid #ddd;

  width: 100%;

  max-width: 300px;

}

.search-form input[type="submit"] {

  border-radius: 30px;

  background: #005bea;

  color: #fff;

  padding: 10px 20px;

  border: none;

  margin-top: 10px;

  transition: background 0.3s;

}

.search-form input[type="submit"]:hover {

  background: #003ecb;

}

/* === Footer Enhancements === */

.site-footer {

  background-color: #0f1626;

  color: #ffffff;

  padding: 40px 20px;

}

.site-footer a {

  color: #00c6fb;

  transition: color 0.3s;

}

.site-footer a:hover {

  color: #ffffff;

}

/* === Links & Typography === */

a {

  color: #005bea;

  text-decoration: none;

  transition: color 0.3s ease;

}

a:hover {

  color: #003ecb;

}

The custom CSS adds value to Astra's Astra WordPress theme by giving the theme a modern, premium style. It is focused on improving aspects of user interfaces like widgets, images, buttons as well as forms and overall design for a sleek professional design.

Global Styling: The body utilizes a simple sans serif font (Inter) which has increased line spacing as well as a lighter background that makes it easier to read and a clean, minimalist design.

Buttons : All buttons, which include Astra's default as well as Gutenberg buttons are designed by a soft blue gradient, smooth edges and top-cased text. A subtle hover animation provides the illusion of elevation and motion, providing an interactive, tactile feel.

featured images: All post thumbnails as well as featured images are rounded (16px) and feature a soft shadow and a small zoom upon hovering, enhancing an immersive visual experience while not distracting from the contents.

Widgets and Titles : Sidebar widgets are designed with the use of padding, rounded corners and white backgrounds. Titles of widgets are made using the same gradient used for buttons, to maintain brand consistency. using white text that is centered and a shadows for emphasis.

Search Form: The search forms input and the button have been revamped with round edges and more streamlined alignment. The submit button takes on blue as the color of the theme while maintaining the same appearance across all forms and buttons.

Footer : This area is given a dark background, with lighter text and highlighted hyperlinks. After hovering, links are turned into white to increase interactivity while maintaining the readability of.

Links and typography:  The links and typography are all styled in the same blue color that buttons do, and feature a the color changing smoothly when hovering, which ensures the sameness and sleek visual feedback.

Credits : Image Was generated Using https://www.canva.com/dream-lab/

This CSS allows the Astra theme an unified contemporary, sleek, and elegant appearance that is ideal for business websites, portfolios or other sites that require professional look without altering themes files, or using other plugins.